postMessage二三事儿

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



    
        
        
        
        
    
     
         
         
        
    

// child.html



    
        
        
        
        
    

    
         
         
    

有什么不对的地方，还请指正哦～