window.postMessage允许多个 window/frame之间跨域传递数据和信息。下面为大家介绍下window.postMessage的工作原理,以及如何在FireFox，IE8+，Opera，Safari和Chrome中使用它
HTML5的`window.postMessage` API 是一种允许不同源的窗口或`iframe`之间安全地进行跨域通信的技术。这一功能的引入解决了之前由于同源策略限制导致的跨域数据交换问题，无需服务器端的额外配合。
`window.postMessage` 的工作原理是通过事件驱动的方式，允许一个窗口发送一个消息给另一个窗口，只要两个窗口之间存在某种关联，如父窗口与子窗口（包括`iframe`）的关系。发送消息时，调用`postMessage`方法，传入要发送的数据和接收方的源（origin）作为参数。接收方则需要通过添加事件监听器来捕获`message`事件，从而获取发送过来的数据。
以下是一个简单的`postMessage`使用示例：
```javascript
// 发送消息
var targetOrigin = 'http://example.com';
window.postMessage('Hello from parent!', targetOrigin);
// 接收消息
window.addEventListener('message', function(event) {
if (event.origin !== targetOrigin) return; // 检查消息来源
console.log('Received:', event.data);
}, false);
```
在不同的浏览器中，`postMessage`的兼容性表现各异。对于Firefox、IE8+、Opera、Safari和Chrome等现代浏览器，它们都支持`window.postMessage`。在Internet Explorer 8及更高版本中，需要使用`attachEvent`而不是`addEventListener`来绑定事件监听器，如示例所示：
```javascript
if (window.addEventListener) {
window.addEventListener('message', handler, false);
} else if (window.attachEvent) {
window.attachEvent('onmessage', handler);
} else {
window['onmessage'] = handler;
}
```
对于`iframe`，使用方式与窗口类似，只需要确保你有对`iframe`的引用，然后通过`iframe.contentWindow`属性来发送和接收消息。例如：
```javascript
// 获取iframe的引用
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', targetOrigin);
```
需要注意的是，`postMessage`的安全性体现在接收方必须检查`event.origin`属性以确认消息是否来自预期的源，防止恶意脚本注入。同时，`event.source`属性可以用来确认消息的发送者。
`window.postMessage`不仅在简单的父子窗口或`iframe`通信中发挥作用，还可以用于实现更复杂的跨窗口通信场景，如多个`iframe`之间的通信，或者在不同窗口之间传递复杂的数据结构。在实际应用中，开发者可以结合`window.postMessage`与其他技术，如Web Workers、WebSocket等，构建更强大的前端应用。
`window.postMessage`是HTML5提供的一个强大且实用的跨域通信工具，它简化了不同源的窗口和`iframe`之间的信息传递，为前端开发者提供了更多可能性。然而，正确地使用和理解其工作原理至关重要，以确保应用程序的安全性和可靠性。
