iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可。
代码如下:
复制代码 代码如下:
//公共方法:设置iframe的高度以保证全部显示数据
//function setpageheight() {
// var iframe = geturlparam('ifname');
// var myiframe = window.parent.document.getelementbyid(iframe);
// iframeloaded(myiframe);
//}
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 = 100;
iframeloaded(oiframe);
}
catch (err)
{
try {
parent.document.getelementbyid(window.name).height = 1000;
} catch (err2) { }
}
}
调用resetiframeheight();方法即可。但是还有一种情况就是使用jquery ajax请求数据,数据都是在body load完成后,还在进行http请求,这时候没有数据占据窗口高度,resetiframeheight方法无法计算出来高度。
这时候,我们想到一个方法:ajax什么时候能够执行完成,当然是complete事件是执行完成。
但是我们也不能在每一个页面里的ajax complete事件中添加处理。这里就用到了jquery ajax的全局变量。
处理ajax和iframe自适应的代码:
复制代码 代码如下:
var sendcount = 0;
var completecount = 0;
// 添加ajax全局事件处理。
resetiframeheight();
$(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 () {
});
先执行一下resetiframeheight,再在每个ajax完成后调用resetiframeheight。经过测试有效。