关于有ajax 请求的iframe自适应高度问题

最新推荐文章于 2025-12-22 21:38:10 发布

转载最新推荐文章于 2025-12-22 21:38:10 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yehshuai/p/4210111.html

文章标签：

#javascript #ViewUI

本文介绍了两种解决iframe自适应高度的问题。第一种适用于页面加载完毕后的静态内容调整，通过JavaScript在页面加载完成时重新计算并设置iframe高度。第二种针对动态加载内容，利用jQuery的ajaxComplete方法，在每次ajax请求完成后更新iframe高度。

关于第一种iframe自适应高度问题比较简单

页面加载完后重新计算一下高度

1 document.onreadystatechange=function() {  
2           if(document.readyState=="complete"){
3            window.parent.document.getElementById("iframeID").height=document.body.scrollHeight;
4               }  
5     }

还有一种就是页面有使用jQuery ajax请求，页面加载完后，请求还在继续，页面的高度还在改变

这种使用上面的方法完全实现不了效果

第二种使用jquery的 ajaxComplete 方法，每一次ajax 请求完成后，都再次获取页面高度更改iframe 高度

    function getheightouat(){
                window.parent.document.getElementById("iframeID").height=document.body.scrollHeight;
    }
    $(document).ajaxStart(function(){})
    .ajaxComplete(function(){
        getheightouat();
    }).ajaxStop(function(){});

转载于:https://www.cnblogs.com/yehshuai/p/4210111.html