前言
postMessage是HTML5引入的API，允许来自不同源的脚本采用异步方式进行通信，实现跨文本文档、多窗口、跨域消息传递。
使用
postMessage(message, targetOrigin)：
- message: 发送的数据，可以是字符串、对象等。
- targetOrigin: 目标窗口的域名。为安全起见，尽量避免使用 ‘*’，而应该明确指定目标的域名。
当 iframe 作为子页面时，它可以使用 window.parent.postMessage() 向其父页面发送消息，无论父页面与 iframe 是否属于同一域。
当父页面想与其嵌入的 iframe 通信时，可以通过获取 iframe 元素的 contentWindow 来调用 postMessage()，将消息发送给子页面。
父
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Parent</title>
</head><body><h1>Parent</h1><button id="sendMessage">给iframe发消息</button><iframe id="childFrame" src="son.html" width="600" height="400"></iframe><script>const iframe = document.getElementById('childFrame');const sendMessageButton = document.getElementById('sendMessage');// 发送消息到 iframesendMessageButton.addEventListener('click', () => {const message = { text: 'Hello World!' };iframe.contentWindow.postMessage(message, '*'); // 使用 '*' 作为目标域});// 监听来自 iframe 的消息window.addEventListener('message', (event) => {// 安全起见，检查 event.origin 消息来源console.log('接收iframe页的消息:', event.data);});</script>
</body></html>
iframe
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Child</title>
</head><body><h1>iframe</h1><button id="sendMessage">给父元素发消息</button><script>// 监听来自父页面的消息window.addEventListener('message', (event) => {console.log('parent页的消息:', event.data);});// 发送消息到父页面const sendMessageButton = document.getElementById('sendMessage');sendMessageButton.addEventListener('click', () => {const message = { text: 'iframe message!' };window.parent.postMessage(message, '*'); // 使用 '*' 作为目标域});</script>
</body></html>