postMessage

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

    
    


    
Status
    

    去index_b查看结果
    
    

http://www.test2.com/getmessage.html

此时，www.test2.com这个域名下存有localStorage！done

参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/The_structured_clone_algorithm