当页面存在ajax请求时的iframe自适应高度问题

我们在使用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) { }
    }
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值