我们在使用iframe内联框架加载子页面时会发现iframe的高度和子页面的高度不一样,这是因为ajax请求服务器数据会有一个过程,iframe已经获取到的高度是ajax回显的数据还未加载到我们的子页面时的高度,所以iframe的高度会比我们子页面的高度要小一些,怎么解决这个问题呢,其实很简单,我们只需要在页面给一个监听事件,当ajax完成后重新获取页面高度传给iframe就行了,话不多说直接上代码
//解决iframe自适应高度问题(子页面有ajax)
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 () {
});
var iframeLoaded = function (iframe) {
if (iframe.src.length > 0) {
if (!iframe.readyState || iframe.readyState == "complete") {
var bHeight = iframe.contentWindow.document.body.offsetHeight;
var dHeight = iframe.contentWindow.document.documentElement.offsetHeight;
var height = Math.max(bHeight, dHeight);
iframe.style.height = height+'px';
}
}
}
//分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id
var reSetIframeHeight = function()
{
try {
var oIframe = parent.document.getElementById('iframe');
oIframe.height = 100;
iframeLoaded(oIframe);
}
catch (err)
{
try {
parent.document.getElementById('iframe').height = 1000;
} catch (err2) { }
}
}