MessageChannel 是一种用于在 Web 页面中的不同上下文之间进行通信的接口，通常用于 iframe 的通信。它通过创建两个通信端口（port1 和 port2）来实现消息传递，每个端口都可以被不同的上下文持有和使用。以下是一个基本示例，展示如何使用 MessageChannel 在 iframe 和父窗口之间进行通信。
父窗口代码
假设你有一个父窗口，其中有一个 iframe，你想通过 MessageChannel 与这个 iframe 通信：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Window</title>
</head>
<body>
<iframe id="myIframe" src="iframe.html"></iframe>
<script>
const iframe = document.getElementById('myIframe');
// 创建 MessageChannel
const channel = new MessageChannel();
// 监听 port1 的消息
channel.port1.onmessage = (event) => {
console.log('Received message from iframe:', event.data);
};
// 当 iframe 加载完成时，通过 postMessage 发送 port2
iframe.onload = () => {
iframe.contentWindow.postMessage('init', '*', [channel.port2]);
};
// 向 iframe 发送消息
function sendMessageToIframe(message) {
channel.port1.postMessage(message);
}
// 示例：发送消息到 iframe
sendMessageToIframe('Hello from parent window!');
</script>
</body>
</html>
iframe 代码（iframe.html）
此处为 iframe 内部的代码，用于接收和发送消息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<script>
window.addEventListener('message', (event) => {
if (event.data === 'init' && event.ports[0]) {
const port = event.ports[0];
// 监听 port 的消息
port.onmessage = (event) => {
console.log('Received message from parent:', event.data);
port.postMessage('Hello from iframe!');
};
// 向父窗口发送初始消息
port.postMessage('Iframe is ready!');
}
});
</script>
</body>
</html>
解释
-
创建
MessageChannel:MessageChannel对象创建了两个端口port1和port2。你可以将其中一个端口发送到另一个上下文（比如 iframe），然后双方就可以通过这些端口进行消息传递。 -
在父窗口中:
- 在 iframe 加载完成后，通过
postMessage方法将port2发送到 iframe。 - 使用
port1来接收来自 iframe 的消息，并发送消息给 iframe。
- 在 iframe 中:
- 监听
message事件以接收port2。 - 使用接收到的端口
port2进行消息接收和发送。
这种方法的好处是，使用 MessageChannel 可以绕过 postMessage 的同源限制，因为消息是通过端口传递的，而不是直接通过窗口对象。这种模式在需要在同源或跨源的 iframe 之间进行更复杂的通信时尤为有用。
人工智能学习网站
https://chat.xutongbao.top