背景

1. 因为本系统需要支持第三方系统页面的嵌入，于是尝试使用iframe标签，进行跨域通信，父子页面相互传值。
2. 初始化时，父页面发送数据给子页面，需要在子页面加载完成后发送，不然接收不到数据。
3. 父页面直接给子页面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.topconsole.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