iframe高度自适应

摘要：我们知道，iframe最大的问题，就是高度的问题，如果你内容的高度是变化,要么你就给你的容器写个固定的高度，如果内容是未知的，显然这个方法并不能达到我们的想要的效果，要么就是通过js来解决这个问题。

我们知道，iframe最大的问题，就是高度的问题，如果你内容的高度是变化,要么你就给你的容器写个固定的高度，如果内容是未知的，显然这个方法并不能达到我们的想要的效果，要么就是通过js来解决这个问题。

JS代码

var adjustIframe = function(id, end) {
    var iframe = document.getElementById(id), time = 0, end = end || 30, intervalID
    if (iframe) {
        function callback() {
            time = time + 1
            if (time == end) {
                clearInterval(intervalID)
            }
            var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
            var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
            iframe.style.height = iheight + "px";
        }
        intervalID = setInterval(callback, 50)
    }
}

Html代码

<iframe id="js_sub_web" width="80%" frameborder="0" scrolling="no" allowTransparency="true" src="http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html">
</iframe>

使用方法：

window.onload = function(){
     adjustIframe("js_sub_web");
}

注意,本脚本只能处理同域的iframe高度

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8544