【Html5 postMessage实现跨域消息传递】
在Web开发中，由于浏览器的同源策略，不同源的网页之间无法直接通信，这限制了开发者在处理跨域数据交换时的灵活性。同源策略是为了保障Web安全而设定的一项核心规则，防止恶意网站通过脚本访问并修改其他网站的数据。
一、同源策略
同源策略（Same Origin Policy）是浏览器强制执行的一项安全政策，它规定了一个网页（包括JavaScript）只能访问与自身具有相同协议（http、https等）、主机名和端口号的其他网页资源。例如，一个在www.example.com下的网页无法直接读取或修改www.anotherexample.com下的数据。同源策略的实施旨在防止跨站点脚本攻击（XSS）和跨站请求伪造（CSRF）等安全威胁。
二、postMessage实现跨域
为了解决同源策略带来的跨域通信难题，HTML5引入了`postMessage` API，允许来自不同源的窗口之间进行有限的消息传递。`postMessage`函数的基本用法如下：
```javascript
window.postMessage(msg, targetOrigin);
```
- `msg`：要发送的消息，可以是JavaScript的任意基本类型或可复制的对象。考虑到兼容性问题，建议将非字符串对象序列化为JSON字符串再发送。
- `targetOrigin`：接收消息的窗口的源，可以是精确的URL，也可以是通配符`*`（表示任意窗口）或`/`（表示与当前窗口同源的窗口）。
当接收到`postMessage`发送的消息时，可以通过监听`message`事件来处理：
```javascript
window.addEventListener('message', function(e) {
// 处理e.data，即接收到的消息
});
```
`message`事件的`event`对象包含了以下重要属性：
- `data`：接收到的消息内容。
- `source`：发送消息的窗口对象。
- `origin`：发送消息的窗口的源地址。
以下是一个简单的使用`postMessage`进行跨域通信的例子：
1. 在`source.com/source.html`（源页面）中，有一个`iframe`指向`target.com/target.html`（目标页面），以及用于输入和发送消息的元素：
```html
<iframe id="iframe" src="http://target.com/target.html"></iframe>
<input id="msg" type="text" placeholder="请输入要发送的消息">
<button id="send">发送</button>
```
2. 在源页面的JavaScript中，当点击发送按钮时，获取输入框的值并使用`postMessage`发送给`iframe`内的目标页面：
```javascript
window.onload = function() {
document.getElementById('send').onclick = function() {
var msg = document.getElementById('msg').value;
var iframeWindow = document.getElementById('iframe').contentWindow;
iframeWindow.postMessage(msg, 'http://target.com');
};
};
```
3. 目标页面`target.com/target.html`需要监听`message`事件来接收消息：
```javascript
window.addEventListener('message', function(e) {
console.log('接收到的消息:', e.data);
// 在这里处理接收到的消息
});
```
通过这种方式，不同源的页面可以通过`postMessage`实现数据交换，打破了同源策略的限制。不过需要注意的是，尽管`postMessage`允许跨域通信，但仍然不能规避同源策略对JavaScript的一些限制，比如无法直接修改跨域页面的DOM。因此，`postMessage`通常配合其他技术（如CORS）一起使用，以实现更完整的跨域解决方案。
