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

本文介绍了如何在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)

在这里插入图片描述
结束啦!!!!!!!

### Vue2 中使用 iframe 展示 PDF 并去除滚动条 在 Vue2 项目中通过 `iframe` 来显示 PDF 文件并希望移除不必要的滚动条,可以采用如下方法: #### HTML 结构调整 为了确保 `iframe` 能够自适应其内容的高度从而避免出现滚动条,在HTML部分应这样定义组件结构[^1]: ```html <template> <div class="pdf-container"> <iframe :src="tempSrc" width="100%" :height="iframeHeight" frameborder="0" scrolling="no"></iframe> </div> </template> ``` 这里设置了宽度为百分之百以及动态绑定高度属性来匹配实际需求。 #### CSS 样式优化 为了让容器更好地包裹住内部的内容而不产生额外的空间导致滚动条显现出来,可以通过CSS来进行一些必要的样式设定: ```css <style scoped> .pdf-container { position: relative; } iframe { display:block; /* 防止默认上下空白 */ } </style> ``` 上述代码片段中的 `.pdf-container` 类用于包含整个 `iframe` 元素,并给予相对定位以便后续操作;而针对 `iframe` 的样式则指定了 `display:block` ,这有助于防止由于浏览器渲染机制造成的顶部和底部可能出现的多余空间。 #### JavaScript 动态计算高度 要让 `iframe` 完全贴合所加载文档的实际大小,则需要借助JavaScript来获取子页面(即PDF文件)的真实尺寸,并据此更新父级元素的高度。可以在mounted生命周期钩子里加入这段逻辑: ```javascript <script> export default { data() { return { tempSrc: 'your-pdf-url', iframeHeight: '600px' // 初始值可设为任意合理数值 } }, mounted(){ const vm = this; function setIframeHeight(iframe){ try{ let innerDoc = (iframe.contentDocument || iframe.contentWindow.document); vm.iframeHeight = `${innerDoc.body.scrollHeight}px`; }catch(e){} } setTimeout(() => {setIframeHeight(this.$refs.iframe)}, 300); // 确保DOM已完全加载后再执行 } }; </script> ``` 以上脚本实现了当组件挂载完成后延迟一段时间去读取内嵌网页(这里是PDF)的身体区域总高,并将其赋给 `iframeHeight` 数据项以触发视图重新渲染,最终达到无滚动条的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值