目录
一、 创建父页面和子页面
父页面（parent.html）：
子页面（child.html）：
二、 实现父子页面之间的通信
在父页面的
在子页面的
三、扩展：postMessage() 方法的语法：
一、 创建父页面和子页面
首先，我们需要创建一个包含 iframe 的父页面和一个子页面，在父页面中嵌套子页面并实现它们之间的通信。
父页面（parent.html）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Parent Page</title>
</head>
<body><h1>Parent Page</h1><iframe src="child.html" id="myIframe"></iframe><script>// 这里将在后文中介绍</script>
</body>
</html>
子页面（child.html）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Child Page</title>
</head>
<body><h1>Child Page</h1><script>// 这里将在后文中介绍</script>
</body>
</html>
二、 实现父子页面之间的通信
在父页面和子页面中，我们可以通过 postMessage 方法来实现跨域通信。以下是一个简单的例子：
在父页面的 <script> 标签中：
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent page!', '*');window.addEventListener('message', (event) => {console.log('Message received in parent page:', event.data);
});
在子页面的 <script> 标签中：
window.addEventListener('message', (event) => {console.log('Message received in child page:', event.data);event.source.postMessage('Hello from child page!', event.origin);
});window.parent.postMessage('Hello from child page!', '*');
三、扩展：postMessage() 方法的语法：
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow：要发送消息的窗口对象。这可以是其他窗口、iframe 或者 worker 等。
message：要发送的数据。可以是任意 JavaScript 兼容的数据类型，如对象、数组、字符串等。targetOrigin：限定消息发送的目标域名。这是一个字符串，指定了接收消息的窗口的源。如果不需要限制目标域名，可以使用通配符 *。
transfer（可选）：传输的资源，如 ArrayBuffer 或者 ImageBitmap。这个参数会被传递给 postMessage 的 receiver。
