阅读量:0
HTML5 跨域通信使用
postMessage 方法，通过 window.postMessage(message, targetOrigin) 发送消息，接收方在 window.onmessage 事件中处理消息。HTML5跨域通讯之postMessage的用法归纳
h3 一、基本概念与原理
1、定义：postMessage是HTML5引入的一种实现跨域通信的方法，允许不同域名下的窗口（Window）之间进行数据传输。
2、原理：postMessage通过向其他窗口发送消息并接收来自其他窗口的消息来实现跨域通信，其安全性由源（origin）策略保证。
h3 二、基本用法
1、发送消息：使用window.postMessage(message, targetOrigin)方法发送消息，其中message是要发送的数据，只能是字符串或可序列化为字符串的对象，targetOrigin指定接收消息的窗口的源，可以是具体的URL，也可以是"*"表示无限制。
2、接收消息：通过监听message事件来接收消息，使用event.data获取消息内容，event.origin获取发送消息的窗口的源。
h3 三、示例代码
1、发送端：
<!DOCTYPE html> <html> <head> <title>发送端</title> </head> <body> <button id="send">发送消息</button> <script> document.getElementById('send').addEventListener('click', function() { var data = '你好，这是一条消息'; window.frames[0].postMessage(data, 'http://receiverdomain.com'); }); </script> </body> </html>2、接收端：
<!DOCTYPE html> <html> <head> <title>接收端</title> </head> <body> <h1 id="message"></h1> <script> window.addEventListener('message', function(event) { if (event.origin !== 'http://senderdomain.com') return; // 安全检查 document.getElementById('message').textContent = event.data; }, false); </script> </body> </html>h3 四、安全性考虑
1、验证发送方源：在接收消息时，应始终验证event.origin以确保消息来自可信的来源。
2、**避免使用"*"**：尽量避免将targetOrigin设置为"*"，因为这会允许任何来源的窗口接收到消息，增加安全风险。
h3 五、常见问题解答
1、Q:postMessage可以发送哪些类型的数据？
A:postMessage只能发送字符串或可序列化为字符串的对象，如JSON对象，如果需要发送复杂数据类型，可以在发送前将其转换为字符串，接收后再转换回原始格式。
2、Q: 如果不确定发送消息的窗口的源，应该怎么办？
A: 在这种情况下，可以使用"*"作为targetOrigin参数，但这会降低安全性，更好的做法是在发送消息前确保你知道接收窗口的源，并将其作为targetOrigin参数传递。
HTML5的postMessage为跨域通信提供了一种安全且灵活的解决方案，通过合理使用postMessage，开发者可以实现不同域名下页面之间的数据交换，同时保持较高的安全性。
HTML5跨域通讯之postMessage用法归纳
在Web开发中，由于浏览器的同源策略，出于安全考虑，限制了跨域请求的数据交互，HTML5提供的window.postMessage方法，可以绕过这一限制，实现跨域通讯，本文将详细归纳postMessage的用法。
基本概念
同源策略：出于安全考虑，浏览器默认不允许跨域访问。
postMessage：一个安全的方法，允许从一个窗口向另一个窗口（无论是否同源）发送消息。
使用方法
发送消息
1、基本语法：
```javascript
otherWindow.postMessage(message, targetOrigin);
```
message：要发送的数据，可以是字符串或对象。
targetOrigin：目标窗口的源（协议+域名+端口），可以指定具体的源，也可以用表示不限制源。
2、示例：
```javascript
// 发送一个简单的字符串
window.postMessage('Hello, world!', 'http://example.com');
// 发送一个对象
window.postMessage({ name: 'Alice', age: 25 }, 'http://example.com');
```
接收消息
1、监听事件：
```javascript
window.addEventListener('message', function(event) {
// event.origin 包含了消息的来源
// event.data 包含了发送的数据
console.log('Received message:', event.data);
console.log('From origin:', event.origin);
}, false);
```
2、注意事项：
确保只有预期的源才能发送消息。
可以通过event.origin验证消息来源。
可以通过event.source获取发送消息的窗口对象。
示例
发送方（http://example.com）：
window.postMessage({ name: 'Alice', age: 25 }, 'http://trustedsource.com');接收方（http://trustedsource.com）：
window.addEventListener('message', function(event) { if (event.origin !== 'http://example.com') { return; // 不是预期的来源，忽略消息 } console.log('Received message:', event.data); }, false);postMessage是HTML5提供的强大功能，允许跨域窗口之间安全地传递消息，通过遵循上述步骤和注意事项，开发者可以有效地利用postMessage实现跨域通讯。
