這篇文章主要為大家展示了“H5中window.postMessage與跨域的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“H5中window.postMessage與跨域的示例分析”這篇文章吧。

成都服務器托管，成都創(chuàng)新互聯(lián)公司提供包括服務器租用、西部信息中心、帶寬租用、云主機、機柜租用、主機租用托管、CDN網站加速、空間域名等業(yè)務的一體化完整服務。電話咨詢：13518219792

HTML5 window.postMessage API

HTML5 window.postMessage是一個安全的、基于事件的消息API。

postMessage發(fā)送消息

在需要發(fā)送消息的源窗口調用postMessage方法即可發(fā)送消息。

源窗口

源窗口可以是全局的window對象，也可以是以下類型的窗口:

文檔窗口中的iframe:

var iframe = document.getElementById('my-iframe');
    var win = iframe.documentWindow;

JavaScript打開的彈窗：

var win = window.open();

當前文檔窗口的父窗口：

var win = window.parent;

打開當前文檔的窗口：

var win = window.opener();

找到源window對象后，即可調用postMessage API向目標窗口發(fā)送消息：

``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');"

postMessage函數(shù)接收兩個參數(shù)：第一個為將要發(fā)送的消息，第二個為源窗口的源。

注：只有當目標窗口的源與postMessage函數(shù)中傳入的源參數(shù)值匹配時，才能接收到消息。

接收postMessage消息

要想接收到之前源窗口通過postMessage發(fā)出的消息，只需要在目標窗口注冊message事件并綁定事件監(jiān)聽函數(shù)，就可以在函數(shù)參數(shù)中獲取消息。

window.onload = function() {
        var text = document.getElementById('txt');  
        function receiveMsg(e) {
            console.log("Got a message!");
            console.log("nMessage: " + e.data);
            console.log("nOrigin: " + e.origin);
            // console.log("Source: " + e.source);
            text.innerHTML = "Got a message!
" +
                "Message: " + e.data +
                "
Origin: " + e.origin;
        }
        if (window.addEventListener) {
            //為窗口注冊message事件，并綁定監(jiān)聽函數(shù)
            window.addEventListener('message', receiveMsg, false);
        }else {
            window.attachEvent('message', receiveMsg);
        }
    };

message事件監(jiān)聽函數(shù)接收一個參數(shù)，Event對象實例，該對象有三個屬性：

1. data 發(fā)送的具體消息

2. origin 發(fā)送消息源

3. source 發(fā)送消息窗口的window對象引用

說明

1. 可以將postMessage函數(shù)第二個參數(shù)設為*，在發(fā)送跨域消息時會跳過對發(fā)送消息的源的檢查。

2. postMessage只能發(fā)送字符串信息。

實例

源窗口

    
    
        
        
        
    
    
        open
        send
          
          
         

 
          
        
    
    

目標窗口win.html

    
    
        
        
        
    
    
        
The New Window
        

        
    
    

以上是“H5中window.postMessage與跨域的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！