postMessage
2019-04-18 本文已影响0人
Allan要做活神仙
2019-04-18-15:38：于公司
postMessage 允许来自不同源的脚本采用异步方式进行通信，可以实现跨文档文档、多窗口、跨域信息传递。用于多窗口间数据通信。
用途之一就是我们常被面试官问及的跨域存储问题。
API
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
窗口的一个引用,比如iframe的contentWindow属性,执行window.open返回的窗口对象,或者是命名过的或数值索引的window.frames.
message
要发送到其他窗口的数据,它将会被(结构化克隆算法)序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*"表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为"/"
接收数据: 监听message事件的发生
window.addEventListener("message", receiveMessage, false) ;
function receiveMessage(event) {
var origin= event.origin;
console.log(event);
}
示例：
http://www.test.com/index_a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cross domain</title>
</head>
<body>
<h2>Status</h2>
<p></p>
<a href="http://www.test2.com/index_b.html">去index_b查看结果</a>
<iframe src="http://www.test2.com/getmessage.html" frameborder="0"></iframe>
<script>
window.onload = function(){
//在页面加载完成后主页面向iframe发送请求
window.frames[0].postMessage('jogging, reading and writing','http://www.test2.com');
}
// 主页面监听message事件,
window.addEventListener('message', function(e){
var data = e.data;
document.querySelector('p').innerHTML = data;
}, false);
</script>
</body>
</html>
http://www.test2.com/getmessage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getmessage</title>
</head>
<body>
<script>
//iframe接收消息，并把当前颜色发送给主页面
window.addEventListener('message', function(e) {
if (e.source != window.parent)
return;
console.log(e.data);
localStorage.setItem('task',e.data);
window.parent.postMessage('finished', '*');
}, false);
</script>
</body>
</html>
此时，www.test2.com这个域名下存有localStorage！done
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/The_structured_clone_algorithm
