postMessage是干什么的呢？
我们都知道解决跨域有多种方式，什么jsonp啦、cors啦、nginx反向代理啦等等，postMessage也是解决跨域的一种方式。那它通常用在什么地方呢？一般是页面和嵌入的iframe或者一个页面和它生成的弹出窗口之间。
postMessage如何使用呢？
知道了postMessage是干什么的，那我们该如何使用它呢？且来看一下它的语法：
发送消息：
otherWindow.postMessage(message, targetOrigin, [transfer]);
- otherWindow
其他窗口的引用，向谁发消息，就获取谁的窗口引用。`始终是你要通信的目标页面的window`
- targetOrigin
通过设置origin属性来指定哪些窗口能接收到消息事件。可以是字符串"*"，表示没有限制；
也可以是一个URI，只有目标窗口的协议、主机地址、端口号跟targetOrigin完全匹配时，才能接收到消息。
不提供确切的targetOrigin将导致数据泄漏到任何对数据感兴趣的恶意站点。
- transfer（可选）
是一串和message 同时传递的 [Transferable](https://developer.mozilla.org/zh-CN/docs/Web/API/Transferable) 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
接收消息：
window.addEventListener("message", receiveMessage, false);
receiveMessage的属性有：
- data
从其他window中传递过来的对象
- origin
调用postMessage时消息发送方窗口的origin。注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置
- source
对发送消息的窗口对象的引用
来个小栗子实战一下吧
光看还是有点小疑惑呀，还是跑个栗子更直观～
// parent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>父页面收发消息</title>
<script type="text/JavaScript">
// sendIframe 通过postMessage实现跨域通信将表单信息发送到iframe上,
function sendIframe() {
// 获取id为iframePage的iframe窗口对象
var iframeWin = document.querySelector("#iframePage").contentWindow;
// 向该窗口发送消息
iframeWin.postMessage(document.querySelector("#message").value, 'http://example.iframe.com');
}
// 监听iframe的消息事件
window.addEventListener("message", function(event) {
// 可以利用origin属性做验证
if (event.origin !== 'http://example.iframe.com') {
return;
}
console.log('接收子窗口数据', event);
}, false);
</script>
</head>
<body>
<textarea id="message"></textarea>
<input type="button" value="发送" onclick="sendIframe()">
<iframe src="http://example.iframe.com/child.html" id="iframePage"></iframe>
</body>
</html>
// child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>子页面收发消息</title>
<script type="text/JavaScript">
// 监听父窗口发送过来的数据
window.addEventListener("message", function(event) {
// 可以利用origin属性做验证
if (event.origin !== 'http://example.com') {
return;
}
console.log('接收父窗口数据', event);
}, false);
function sendParent() {
// 向父窗口发送消息
window.parent.postMessage(document.querySelector("#ifameMessage").value, 'http://example.com');
}
</script>
</head>
<body>
<textarea id="ifameMessage"></textarea>
<input type="button" value="发送" onclick="sendParent()">
</body>
</html>
有什么不对的地方，还请指正哦～
网友评论