vue中 iframe 高度自适应（笔记）

最新推荐文章于 2024-05-05 22:37:32 发布

温柔于心动

最新推荐文章于 2024-05-05 22:37:32 发布

阅读量447

点赞数 2

文章标签： vue.js 笔记 javascript

本文链接：https://blog.csdn.net/frazier1995/article/details/132732685

版权

本文介绍了如何在Vue组件中使用iframe，并在`mounted`生命周期钩子中，通过定时器每秒获取iframe内容区域的高度并动态设置其高度，以保持与其内容同步显示。

摘要由CSDN通过智能技术生成

首先给iframe设置一个id，

<iframe id="iframe" :src="iframeUrl" frameborder="0" scrolling="no"/>

然后在mounted中执行以下代码

mounted() {
  var iframes = document.getElementsByTagName('iframe');
  setInterval(function () {
     for (var i = 0, j = iframes.length; i < j; ++i) {       
     iframes[i].setAttribute('height',iframes[i].contentWindow.document.body.scrollHeight);
     }
  }, 1000);
},