vue项目内嵌iframe，iframe如何自适应高度

程序媛_MISS_zhang_0110

已于 2024-01-05 10:31:52 修改

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： 1024程序员节

于 2023-10-24 14:08:59 首次发布

本文链接：https://blog.youkuaiyun.com/MISS_zhang_0110/article/details/134011000

Vue 专栏收录该内容

86 篇文章

订阅专栏

本文介绍了如何在Vue项目中嵌入iframe并实现自适应高度，提供了针对不同浏览器（如Chrome、Safari、Firefox、IE）的代码示例，包括reInitIframe和maxSizeIframe函数，以确保iframe在不同环境下正确调整大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、直接上代码（google版本的）

  <iframe
    id="iframeContainer"
         src="/static/iframePhone/html/main.html"
         style="width: 600px; height: 80px"
   ></iframe>
   
setInterval(() => {
    this.reInitIframe('iframeContainer', 70) //dom更新后开始重置iframe，加计时器是为了等待iframe中js完全加载完再重新计算iframe
}, 300)

 // 重新设置iframe大小，只处理了google
 reInitIframe(iframeId, minHeight) {
        try {
            let iframe = document.getElementById(iframeId)
            let bHeight = 0
            bHeight = iframe.contentWindow.document.body.scrollHeight
            let height = Math.max(bHeight, minHeight) + 10
            iframe.style.height = height + 'px'
        } catch (ex) {}
    },

上面代码只处理了google，其他几个浏览器可以自行参考一下

// 重新设置iframe大小
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false) {
            try {
                bHeight = iframe.contentWindow.document.body.scrollHeight;
            } catch (ex) {                
            }
        }
        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
        else if (isIE == false && isOpera == false && iframe.contentWindow) {
            try {
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            } catch (ex) {
            }
        }
        else if (isIE == true && isIE9More) {//ie9+
            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
            if (heightDeviation == 0) {
                bHeight += 3;
            } else if (heightDeviation != 3) {
                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                bHeight += 3;
            }
        }
        else//ie[6-8]、OPERA
            bHeight += 3;

        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
        iframe.style.height = height + "px";
        // console.info("iframe rehight");
    } catch (ex) { }
}
function maxSizeIframe(iframeId, minHeight) {
    //eval("window.IE9MoreRealHeight" + iframeId + "=0");
    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 300);
}
maxSizeIframe("mainFrame", 500)