通信API之跨文档消息传输postMessage()

跨文档消息传输postMessage()

H5提供了在网页文档之间相互接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（协议、域、端口）的Web网页之间可以相互通信，而且还可以安全地实现跨源通信。

使用情况

使用场景.png

1.两个文档之间进行通信。A.html 和 B.html 两者之间需要进行通信。
2.父子文档之间进行通信。A.html 和 A.html中的iframe标签里面的内容

语法

发送方：

otherWindow.postMessage(message, targetOrigin, [transfer])
参数说明：
  otherWindow：其他窗口的引用，如执行window.open返回的窗口对象、通过window.opener返回打开该文档的前一个文档、通过window.frames数组指定序号（index）或名字的方法返回单个frame、iframe的contentWindow属性。
  message：将要发送的消息文档，也可以是javaScript对象
  targetOrigin：接收消息的对象窗口的URL或"*"(表示无限制)，targetOrigin可以控制消息可以发送到哪些窗口；【只有目标窗口的协议、主机地址、端口三者完全匹配消息才会被发送】
  transfer：表示Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送方将不再保留所有权。

接收方：通过window对象添加监听message的事件

window.addEventListener('message', function(){
  console.log(event)
}, false)
message中的属性：
  data：表示从其他window中传递过来的对象
  origin：调用postMessage时消息发送方窗口的origin，由协议、域名、端口号组成
  source：对发送消息的窗口对象的引用；我们可以通过此对象在不同origin的两个窗口将建立双向通信。

案例：
index.html

    
        
        
    
    
        
点击跳转到indextarget.html
        
        
    

indexframe.html

    
        
        
    
    
        

            目前是indexframe页面
        
        


        
        
    

indextarget.html

    
        
        
    
    
        

            目前是indextarget页面
        
        


        
        
    

运行截图：
index.html中直接调用

index.html中直接调用.gif

index.html中通过setTimeout进行调用

index.html中通过setTimeout进行调用.gif

• 注意事项

1.调用postMessage()的时候，页面必须加载完成或者在加载的函数中调用。
2.为了安全起见，请不要使用message事件添加任何时间监听器。
3.如果需要使用接收message，请使用origin和source属性验证发件人的身份。
4.当我们使用postMessage将数据发送到其他窗口的时候，应该始终指定精确的目标origin，而不是*通用的。

---

通道通信MessageChannel()

通道通信机制提供了一种在多个源（位于不同的源中）之间进行通信的方法，这些源之间通过端口（port）进行通信，从一个端口中发出的数据将被另一个端口接收。

使用情况

使用场景.png

1.一个文档中有两个iframe，这两个iframe之间进行通信。

• 语法

MessageChannel对象：当我们创建一个MessageChannel对象的时候，MessageChannel对象中包含两个MessagePort对象，通道通信机制中所使用的每个端口都是一个MessagePort对象，主要有以下三个方法：
postMessage()：用于向通道发送消息
start()：用于激活端口，开始监听端口是否接收到消息
close()：用于关闭并停用端口。
onmessage()：每个MessagePort对象都具有这个事件，当端口接收到消息时触发该事件。

MessageChannel对象.png

案例：
iframe1.html

    
        
        
    
    
        

            目前是indexframe1页面
        
        


        
        
    

index.html

    
        
        
    
    
        
index.html父页面
        

            
        
        
        
        
    

iframe2.html

    
        
        
    
    
        
           
            目前是indexframe2页面
        
        


        
        
    

运行过程：
frame1：创建MessageChannel（port1【自己使用】，port2）------------传递消息和端口port2---------->index：转发frame1的请求并转发相关的端口port2--------------------------->frame2：做出回应，通过port2和ifame中的port1进行通信。

运行效果：

MessageChannel.gif