如何使用postMessage向本地发消息
postMessage是一个非常强大的API,它可以在两个不同的文档之间通信,可以在iframe中进行通信,也可以在本地发消息。这篇文章将详细介绍如何使用postMessage向本地发消息。
什么是postMessage
postMessage是一种跨窗口通信机制。它允许在不同的window对象之间发送一个消息，无论这两个窗口是否来自同一个域名。它的语法如下：
window.postMessage(message, targetOrigin, [transfer])
其中 message 是要发送的消息，targetOrigin 是发送消息的目标窗口的源（协议 + 域名 + 端口号），transfer 是可选的，用于传递一些数据对象（比如 ArrayBuffer）。
如何向本地发消息
在有些场景下，我们需要在同一个页面的不同iframe之间进行通信，这时可以使用postMessage。下面是一个例子：
1. HTML结构
<div id=\"iframe-wrapper\">
<iframe id=\"iframe-1\" src=\"iframe1.html\" width=\"500\" height=\"500\"></iframe>
<iframe id=\"iframe-2\" src=\"iframe2.html\" width=\"500\" height=\"500\"></iframe>
</div>
2. iframe1.html
<body>
<button onclick=\"sendMessage()\">向iframe2发送消息</button>
<script>
function sendMessage() {
let message = 'Hello, iframe2!';
window.parent.postMessage(message, '*');
}
</script>
</body>
3. iframe2.html
<body>
<h1 id=\"message-received\"></h1>
<script>
window.addEventListener('message', function(event) {
if (event.origin !== window.location.origin) return;
document.querySelector('#message-received').textContent = event.data;
});
</script>
</body>
如上代码所示，我们在 iframe1.html 中的 sendMessage 函数里向另一个 iframe 发送了一个字符串 ‘Hello, iframe2!’，并将接收窗口设置为 *，代表任何来源都可以。
注意事项
postMessage虽然强大，但是使用时也有几点需要注意：
1. 实际使用时，targetOrigin参数应该指定具体的窗口源，而不是使用通配符*，以避免安全漏洞。
2. 接收消息的窗口需要添加message事件的监听器以接收消息。
3. 被攻击者站点一定要将targetOrigin 明确设置为一个固定的值，同时需要对消息进行校验，且不要相信消息中包含的数据。
总结
postMessage是一种十分强大的API，它可以在跨域的iframe中通信,也可以在本地发消息，但是需要注意安全问题，正确地设置targetOrigin参数，以免给网站造成安全漏洞。