场景

2023年03月14日

柏拉文

越努力，越幸运

一、Iframe 通信

---

描述: 一个由 MessageChannel.MessageChannel 构造函数创建的新 Channel. 当 IFrame 被加载后，我们使用 MessagePort.postMessage 把 port2 和一条消息一起发送给 IFrame. 然后 handleMessage 回调响应 IFrame 发回的消息（使用 MessagePort.onmessage），并把它渲染到页面段落中。MessageChannel.port1 用来监听，当消息到达时，会进行处理。

1.1 A 页面

Html

<h1>A 页面</h1>
<iframe src="b.html" width="480" height="320"></iframe>

Css

JavaScript

const messageChannel = new MessageChannel();
const BIframe = document.querySelector('iframe[src="b.html"]');

function handlerMessageCallback(e){
    const { data } = e;
    console.log("A 页面发出数据之后的回调",data)
}
function handleOnload(){
    messageChannel.port1.onmessage = handlerMessageCallback;
    BIframe.contentWindow.postMessage("aaa","*",[
        messageChannel.port2
    ]);
}

BIframe.addEventListener("load",handleOnload);

1.2 B 页面

Html

<h1>B 页面</h1>

Css

JavaScript

function handlerMessage(e){
    const { data,ports } = e;
    console.log("B 页面接受到的数据:", data)
    e.ports[0].postMessage("bbb");
}
window.addEventListener("message",handlerMessage);