Vue 通过 iframe 与 HTML 页面交互：postMessage 传值与子页面通信

Vue 中 iframe 嵌入与基础配置

当业务需求要求在 Vue 应用中集成其他模块或独立 HTML 页面的功能时，可以通过 iframe 标签引入这些页面，从而实现两者之间的功能交互。

首先，在 Vue 组件的模板中直接使用 iframe 标签来引用目标 HTML 页面。

<template>
 <div>
  <iframe
   name="iframeMap"
   id="iframeMapViewComponent"
   width="100%"
   height="470px"
   v-bind:src="smgHtmlPath"
   frameborder="0"
   scrolling="no"
   ref="iframeDom"
  ></iframe>
 </div>
</template>

其中 src 属性指定了 HTML 页面的地址。建议在 Vue 的 data 中定义如 smgHtmlPath 这样的属性，并在 created 生命周期钩子中对其进行初始化赋值。

当页面成功加载后，即可开始进行 Vue 页面与 HTML 页面之间的数据交互。

利用 postMessage 实现跨域通信

若需从 Vue 页面调用 HTML 页面中的方法，可参考以下代码实现。

 mounted() {
  this.iframeWin = this.$refs.iframeDom.contentWindow;
 },

首先，在 Vue 的 mounted 生命周期钩子中获取 iframe 对应的 DOM 对象。

在 Vue 页面中，利用 postMessage API 向 HTML 页面发送请求数据。由于 Vue 应用与嵌入的 HTML 页面可能处于不同域名，这会引发跨域限制，而 postMessage 机制能够有效解决跨域通信问题。经测试，该方案在 Google Chrome 和 IE11 浏览器中均支持跨域通信。

loadSmgxmlModels(data) {
    this.iframeWin.postMessage(data,"*")
}

这里的 data 参数代表需要传递给 HTML 页面的具体数据内容。

第二个参数“*”表示允许所有地址接收消息；若需限制接收源，可指定具体域名，例如 www.baidu.com。

在 HTML 页面的标签内编写监听函数，用于捕获来自父页面的请求并提取数据。

window.addEventListener('message', function(ev) {
  // 当我们是父子窗口进行消息传递时，可以使用此判断，只接受父窗口传递来的消息,
  if (ev.source !== window.parent) return;
  var data = ev.data;
 console.log("vue传递的数据为："+data);
  //下面可以调用我们html页面js中的方法，使用传递的数据进行操作了
}, false);

此处监听 message 事件，从而获取传递过来的数据。

iframe 嵌套传值补充技巧

补充知识：Vue 界面使用 iframe 嵌套 HTML 界面的传值问题

一、从父页面给子页面传值

可以通过 URL 参数进行传值。若嵌入的是外网地址（如 www.baidu.com），可设置为如下形式：

<iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" style="position:related;top: 2.8px;left: 0px;"></iframe>

asd 后面的值可根据实际需求进行修改，这不会影响地址的正常访问。

若嵌入的是本地 HTML 文件，写法类似：

:src="test.html#asd =1"

至于如何在子页面中读取 asd 的值，目前尚未找到确切方法，后续若寻得合适方案将另行更新。这种方法适用于较为简单的传值需求。

父页面获取子页面变量值

二、父页面获取子页面的值

例如，我们在子页面中设置四个 click 事件，对应的 JS 代码如下：

<script>
    var n = 0;
    function FN()
    {
      n = 1;
      alert('hello1'+n);
    }
    function EN()
    {
      n = 2;
      alert('hello1'+n);
    }
    function ER()
    {
      n = 3;
      alert('hello1'+n);
    }
    function GN()
    {
      n = 4;
      alert('hello1'+n);
    }
</script>

那么在父页面的 methods 中可以定义如下函数，以获取变量 n 的值：

callchild(){
   let obj1=window.frames["child"];//获得对应iframe的window对象
   alert(obj1.n);
  },

通过触发某个 button 按钮调用 callchild 函数，即可看到弹出的窗口提示。

以上关于 Vue 使用 iframe 引用 HTML 页面并实现方法调用的操作即为全部内容，希望能对大家有所帮助，也欢迎支持本站。