vue组件和iframe页面的相互传参问题

最新推荐文章于 2024-07-06 11:25:59 发布

weixin_42108617

最新推荐文章于 2024-07-06 11:25:59 发布

阅读量3.9k

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42108617/article/details/103924427

版权

本文探讨了在Vue组件中嵌入iframe页面并实现双向传参的问题。详细介绍了如何从Vue组件调用iframe页面的方法和传递参数，以及iframe如何反向调用Vue组件的方法。文中指出，由于iframe的parent并非Vue实例，直接调用会报错。通过在Vue实例的created钩子中特殊处理，实现了参数传递。虽然目前解决方案并不完善，作者承诺将持续更新遇到的问题和新的解决方案。

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

vue组件和iframe页面的相互传参问题

目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件，子iframe文件也是html文件，涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白；

而最近我在项目中碰到了这种需求：在vue组件中嵌入iframe页面，并实现父子传参；

vue组件调用iframe页面方法和参数

下面是在 vue组件中（父组件）一个通过点击按钮触发的方法：

 sentToIframe() {
   
      let childFrameObj = document.getElementById("unityiframe");
      console.log("childFrameObj", childFrameObj);
      // childFrameObj.contentWindow.getMessageFromParent(this.tData); //第一种向子iFrame传参方式，调用iframe的methods达到传参的目的
      this.$refs.unity.contentWindow.getMessageFromParent(this.tData); // 这样也是可以调用子iframe的方法

      // childFrameObj.contentWindow.frameData = "这是vue组件给你的参数！" // 传参成功
      this.$refs.unity.contentWindow.frameData =
        "这是vue组件给你的第二个参数！"; //传参成功
      console