iframe交互 使用postnessage实现跨域通信

➢ 需求

一个类似弹窗的表格展示

在第三方的系统上展示对应的表格信息

“

➢ 设计

实现方式考虑是iframe放置在第三方

涉及点击弹出提示（需要交互和参数）

使用postMessage实现iframe通信

➢ 实现

父页面放置一个iframe，设置id和name，加载不同域和端口的网页

<iframe
    src="http://192.168.73.1:8082/childOne.html"
    id="childOne"
    name="childOne"
    width="800"
    height="600"
></iframe>

父页面获取iframe元素(兼容老系统使用var)

//获取iframe元素
var iFrame = document.getElementById("childOne").contentWindow;

父页面向iframe子页面发送消息

第一个参数是传递的参数，可以是任意类型

第二个参数是要发送给的url，如果不一致则发送失败，*是所有

iFrame.postMessage("msg", "*");

子页面接收

//监听message事件
window.addEventListener("message", function(data){
    // do soming
    console.log(data)
}, false);

➢ 参考地址：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage