在JavaScript中，iframe子页面与父页面之间的跨域通信是一个常见的需求，特别是在处理嵌套页面交互、第三方组件或服务集成时。由于同源策略的限制，不同源的页面默认不能直接访问对方的DOM元素或JavaScript变量。然而，通过`window.postMessage()`方法，我们可以实现跨域的双向通信。
`window.postMessage()`方法允许一个页面向另一个页面发送消息，无论这两个页面是否同源。它的基本语法如下：
```javascript
otherWindow.postMessage(message, targetOrigin, [transfer]);
```
- `otherWindow`: 需要通信的窗口对象引用，如`window.parent`表示父窗口。
- `message`: 要传递的数据，可以是字符串或对象。
- `targetOrigin`: 目标窗口的源，即协议+域名+端口号。可以设置为`"*"`，表示可以向任何窗口发送，但这样做可能会带来安全风险，因此通常需要明确指定目标源以确保安全性。
- `[transfer]`: 可选参数，用于转移所有权的对象列表，通常是Web传输对象，如ArrayBuffer、ImageBitmap等。
在发送消息时，如果`targetOrigin`与实际接收消息的窗口的源不匹配，消息将不会被发送。这提供了一种安全机制，防止恶意页面接收到不应该接收到的信息。
跨域接收信息则需要在窗口上监听`message`事件：
```javascript
window.addEventListener('message', function (e) {
console.log(e.data); // 接收到的数据
console.log(e.origin); // 发送消息的窗口的源
console.log(e.source); // 发送消息的窗口对象引用
});
```
在监听函数中，可以通过`e.data`获取传递过来的数据，`e.origin`用于验证消息来源，`e.source`可以用来建立双向通信。
下面是一个简单的跨域通信的示例：
**父页面代码**：
```html
<body>
<button onClick="sendInfo()">向子窗口发送消息</button>
<iframe id="sonIframe" src="http://192.168.2.235/son.html"></iframe>
<script>
var info = { message: "Hello Son!" };
function sendInfo() {
var sonIframe = document.getElementById("sonIframe");
sonIframe.contentWindow.postMessage(info, '*');
}
window.addEventListener('message', function (e) {
alert(e.data.message);
}, false);
</script>
</body>
```
**子页面代码**：
```html
<body>
<button onClick="sendInfo()">向父窗口发送消息</button>
<script>
var info = { message: "Hello Parent!" };
function sendInfo() {
window.parent.postMessage(info, '*');
}
window.addEventListener('message', function (e) {
alert(e.data.message);
}, false);
</script>
</body>
```
在这个例子中，父页面有一个按钮，点击后会向子页面发送消息。子页面也有一个按钮，用于向父页面发送消息。双方都通过`window.postMessage()`发送和`window.addEventListener('message')`监听来实现跨域通信。
使用`window.postMessage()`进行iframe跨域通信是一种安全且灵活的方式，它使得不同源的页面能够共享数据，促进了更复杂Web应用的构建。但需要注意，为了防止跨站脚本攻击(XSS)，应当始终检查`event.origin`以确保消息来自预期的源。
