MessageChannel iframe通信

最新推荐文章于 2025-04-05 09:00:00 发布

原创最新推荐文章于 2025-04-05 09:00:00 发布 · 916 阅读

CC 4.0 BY-SA版权

文章标签：

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>