使用iframe时动态获取内容高度

最新推荐文章于 2025-03-04 22:10:02 发布

cfangling

最新推荐文章于 2025-03-04 22:10:02 发布

阅读量6k

点赞数

分类专栏： js vue iframe 文章标签： iframe

本文链接：https://blog.youkuaiyun.com/cifangling/article/details/90479689

版权

js 同时被 3 个专栏收录

9 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

iframe

1 篇文章

订阅专栏

博客介绍了iframe页面内容由Vue编写，需加在JS处。因iframe嵌套存在跨域问题，可使用postMessage()将内容高度向外传，父页面获取高度后设置给iframe来解决。

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

使用iframe时动态获取内容高度

iframe页面里的内容是由vue写的。
iframe要加在用js写的地方。

原理：iframe嵌套，会有跨域问题。
我们可以使用postMessage(),自行将内容高度不停的向外传。
父页面，获取到高度设置给iframe。ok

data () {
    return {
      infoMenu: infoMenu,
      indInfo:'',
      timer:'',
    }
  },
  mounted () {
    var _this = this
    _this.timer = setInterval(function(){
      top.postMessage(_this.$refs.dataCon.clientHeight,'*');
    },300)
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },

父页面接收

<iframe src="http://www.lincoc.com/#/data/shanghaiImportBOL" id="iframe" height="auto" width="1170px" scrolling="no" style="min-height:560px;overflow:hidden;display:block;margin:0 auto;"></iframe>

<script>
	window.addEventListener("message", function (event) {
        // 子窗口发送过来的数据
        document.getElementById("iframe").height = event.data;
    }, false);
</script>