iframe中有ajax,设置iframe自适应高度
2014-09-24 16:01
351 查看
-------------------------------------------------------------------
http://www.jb51.net/article/15780.htm http://www.jb51.net/article/48936.htm http://bestchenwu.iteye.com/blog/1231956
在iframe外添加此js,以下两个都可以
------------1----------------------------
function iFrameHeight() {
var ifm = document.getElementById("cateFrame");
var subWeb = document.frames ? document.frames["cateFrame"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
-----------2-----------------------
function SetWinHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
------iframe做些修改--------
onload 方法,可以写iFrameHeight()也可以写Javascript:SetWinHeight(this)
<iframe id="cateFrame" name="cateFrame" width="100%" frameborder="0" scrolling="no"
marginwidth="0" marginheight="0" src="welcome.aspx" onload="iFrameHeight()">
<%-- Javascript:SetWinHeight(this)--%>
</iframe>
----------------以下是有ajax的情况下使用的-------------------
在iframe页面内body后添加此js 再次设置一下iframe高度
<script type="text/javascript">
var iframeLoaded = function (iframe) {
if (iframe.src.length > 0) {
if (!iframe.readyState || iframe.readyState == "complete") {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
//分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id
var reSetIframeHeight = function () {
//try {
var oIframe = parent.document.getElementById(window.name);
//oIframe.height = 80;
iframeLoaded(oIframe);
// }
// catch (err) {
// try {
// parent.document.getElementById(window.name).height = 500;
// } catch (err2) { }
// }
}
// reSetIframeHeight();
var sendcount = 0;
var completecount = 0;
// 添加ajax全局事件处理。
$(document).ajaxStart(function (a, b, c) {
}).ajaxSend(function (e, xhr, opts) {
sendcount++;
}).ajaxError(function (e, xhr, opts) {
}).ajaxSuccess(function (e, xhr, opts) {
}).ajaxComplete(function (e, xhr, opts) {
completecount++;
reSetIframeHeight();
}).ajaxStop(function () {
});
</script>
http://www.jb51.net/article/15780.htm http://www.jb51.net/article/48936.htm http://bestchenwu.iteye.com/blog/1231956
在iframe外添加此js,以下两个都可以
------------1----------------------------
function iFrameHeight() {
var ifm = document.getElementById("cateFrame");
var subWeb = document.frames ? document.frames["cateFrame"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
-----------2-----------------------
function SetWinHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
------iframe做些修改--------
onload 方法,可以写iFrameHeight()也可以写Javascript:SetWinHeight(this)
<iframe id="cateFrame" name="cateFrame" width="100%" frameborder="0" scrolling="no"
marginwidth="0" marginheight="0" src="welcome.aspx" onload="iFrameHeight()">
<%-- Javascript:SetWinHeight(this)--%>
</iframe>
----------------以下是有ajax的情况下使用的-------------------
在iframe页面内body后添加此js 再次设置一下iframe高度
<script type="text/javascript">
var iframeLoaded = function (iframe) {
if (iframe.src.length > 0) {
if (!iframe.readyState || iframe.readyState == "complete") {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
//分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id
var reSetIframeHeight = function () {
//try {
var oIframe = parent.document.getElementById(window.name);
//oIframe.height = 80;
iframeLoaded(oIframe);
// }
// catch (err) {
// try {
// parent.document.getElementById(window.name).height = 500;
// } catch (err2) { }
// }
}
// reSetIframeHeight();
var sendcount = 0;
var completecount = 0;
// 添加ajax全局事件处理。
$(document).ajaxStart(function (a, b, c) {
}).ajaxSend(function (e, xhr, opts) {
sendcount++;
}).ajaxError(function (e, xhr, opts) {
}).ajaxSuccess(function (e, xhr, opts) {
}).ajaxComplete(function (e, xhr, opts) {
completecount++;
reSetIframeHeight();
}).ajaxStop(function () {
});
</script>
相关文章推荐
- JavaScript设置IFrame高度自适应(兼容多浏览器)
- javascript设置iframe高度自适应
- 动态设置iframe高度(iframe高度自适应)
- iframe 高度设置、iframe 自适应高度方法总结
- 设置iframe高度自适应
- HTML教程:如何设置Iframe自适应高度
- 如何设置iframe高度自适应在跨域情况下的可用方法
- HTML教程:如何设置Iframe自适应高度
- 如何设置iframe高度自适应在跨域情况下的可用方法
- jQuery设置iframe的高度根据页面内容自适应
- 设置iframe自适应高度(/*兼容FF/IE9/IE8/IE7/IE6*)
- 设置HTML中的Iframe框架自适应高度
- JavaScript设置IFrame高度自适应(兼容多浏览器)
- 如何设置iframe高度自适应,在跨域的情况下能做到吗?
- 跨域设置iframe的高度自适应
- iframe 高度设置、iframe 自适应高度方法总结
- [javascript] iframe高度调整(随时自适应)(iframe加载ajax的chart图)
- 如何设置iframe高度自适应,在跨域的情况下能做到吗?