vue中iframe标签跨域通信——父子页面之间传值（解决子页面收不到父页面的值或子页面收到的数据为undefined的问题）

背景

因为本系统需要支持第三方系统页面的嵌入，于是尝试使用iframe标签，进行跨域通信，父子页面相互传值。
初始化时，父页面发送数据给子页面，需要在子页面加载完成后发送，不然接收不到数据。
父页面直接给子页面postMessage发送消息，但是子页面收不到数据；在iFrame.onload函数中发送消息，依旧未收到消息

解决思路

子页面向主网页发送消息，告诉它子网页加载好了，然后主网页再发送消息给子网页进行处理，这样虽然会多一些交互代码，但可以精确地执行交互。

代码

父页面

<template>
  <!-- 嵌套子页面-->
  <iframe
    :src="ip"
    id="map"
    ref="mapFrame"
    scrolling="yes"
    frameborder="0"
	width="100%"
    height="750px"
  ></iframe>
</template> 



data(){
     return{
         //嵌入页面的路径
         ip:"http://localhost:8080/sonPage"
     }
 }
  created() {
    var that = this;
    // 父页面监听iframe消息
    window.addEventListener(
      "message",
      (e) => {
        if (e.data == "childLoaded") {
          console.log("父页面收到数据");
          console.log(e.data);//子组件发过来的数据
          console.log("父页面发送数据");
          var iFrame = that.$refs.mapFrame;
          iFrame.contentWindow.postMessage(
            { data: "aaa", name: "bbb" },//可以以对象形式传参，也可以直接传字符串"aaa"
            that.ip//嵌入页面的路径,也可以直接传"*"
          );
        }
      },
      false
    );
  },

子页面

  created() {
    // 向父页面发送消息
    window.parent.postMessage("childLoaded", "*");
    window.addEventListener(
      "message",
      (e) => {
        if (e.data) {
          console.log("子页面收到父页面传过来的消息");
          // if (e.origin === "http://localhost:8010") {
          // <!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->
          console.log(e);
          console.log(e.origin); //父页面URL
          // console.log(e.source); // 父页面window对象，全等于window.parent/window.top
          console.log(e.data); //父页面发送的消息
          // }
        }
      },
      false
    );
  },

效果

控制台打印数据
在这里插入图片描述

参数说明

postMessage

作用向其他窗口发送消息
语法 otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow为其他窗口的一个引用，比如 iframe 的 contentWindow 属性
message为将要发送到其他 window的数据，为字符串
targetOrigin为能接收到消息事件的窗口，格式为窗口的网址，如果想要所有窗口都能接收到消息，可设置为*
[transfer]为可选参数，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。此参数一般不使用

addEventListener

作用接收消息
语法 window.addEventListener(event, function, useCapture)

event为事件名称，一般为"message"
function为消息处理函数，用户可自定义，输入参数为e，e包含2个常用的参数，e.data为接收到的字符串消息；e.origin为发送消息的网址，可通过此参数来做判断是否需要处理，以防攻击
useCapture用来处理当存在多级组件都有接收消息响应函数时的处理顺序，true表示从外向内，即外层的先响应，false为从内向外，默认为false

标签