HTML5 window.postMessage 與跨域

時間 2019-11-17

標籤 html5 html window.postmessage window postmessage 欄目 HTML5 简体版

原文原文鏈接

在前一篇文章中，講到瀏覽器同源策略，即阻止不一樣域的頁面間訪問彼此的方法和屬性，並對解決同源策略跨域問題提出的解決方案進行闡述：子域代理、JSONP、CORS。本篇將詳細闡述HTML5 window.postMessage，藉助postMessage API，文檔間能夠以安全可控的方式實現跨域通訊，第三方JavaScript代碼也能夠與iframe內加載的外部文檔進行通訊。javascript

先來看一個postMessage實例html

有須要能夠看看相關代碼html5

HTML5 window.postMessage API

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

postMessage發送消息

在須要發送消息的源窗口調用postMessage方法便可發送消息。git

源窗口
源窗口能夠是全局的window對象，也能夠是如下類型的窗口:github
- 文檔窗口中的iframe:web
```
var iframe = document.getElementById('my-iframe');
  var win = iframe.documentWindow;複製代碼
```
- JavaScript打開的彈窗：api
```
var win = window.open();複製代碼
```
- 當前文檔窗口的父窗口：跨域
```
var win = window.parent;複製代碼
```
- 打開當前文檔的窗口：瀏覽器
```
var win = window.opener();複製代碼
```

找到源window對象後，便可調用postMessage API向目標窗口發送消息：

```win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');```複製代碼

postMessage函數接收兩個參數：第一個爲將要發送的消息，第二個爲源窗口的源。

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

接收postMessage消息

要想接收到以前源窗口經過postMessage發出的消息，只須要在目標窗口註冊message事件並綁定事件監聽函數，就能夠在函數參數中獲取消息。

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!<br>" +
                "Message: " + e.data +
                "<br>Origin: " + e.origin;
        }
        if (window.addEventListener) {
            //爲窗口註冊message事件，並綁定監聽函數
            window.addEventListener('message', receiveMsg, false);
        }else {
            window.attachEvent('message', receiveMsg);
        }
    };複製代碼

message事件監聽函數接收一個參數，Event對象實例，該對象有三個屬性：

data 發送的具體消息
origin 發送消息源
source 發送消息窗口的window對象引用

說明

能夠將postMessage函數第二個參數設爲*，在發送跨域消息時會跳過對發送消息的源的檢查。
postMessage只能發送字符串信息。

實例

源窗口

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Html5 postMessage</title>
        <style>
            #otherWin {
                width: 600px;
                height: 400px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <button id="btn">open</button>
        <button id="send">send</button>
         <!-- 經過 iframe 嵌入子頁面(接收消息目標窗口) --> 
         <iframe src="http://jhssdemo.duapp.com/demo/h5_postmessage/win.html" 
                     id="otherWin"></iframe> 
         <br/><br/> 
         <input type="text" id="message"><input type="button" 
                 value="Send to child.com" id="sendMessage" /> 
        <script>
            window.onload = function() {
                var btn = document.getElementById('btn');
                var btn_send = document.getElementById('send');
                var sendBtn = document.getElementById('sendMessage');
                var win;
                btn.onclick = function() {
                    //經過window.open打開接收消息目標窗口
                    win = window.open('http://jhssdemo.duapp.com/demo/h5_postmessage/win.html', 'popUp');
                }
                btn_send.onclick = function() {    
                    // 經過 postMessage 向子窗口發送數據        
                    win.postMessage('Hello', 'http://jhssdemo.duapp.com/');
                }
                function sendIt(e){ 
                     // 經過 postMessage 向子窗口發送數據
                     document.getElementById("otherWin").contentWindow 
                     .postMessage( 
                         document.getElementById("message").value, 
                        "http://jhssdemo.duapp.com/"); 
                } 
                sendBtn.onclick = function(e) {
                    sendIt(e);
                };
            };
        </script>
    </body>
    </html>複製代碼

目標窗口

win.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Html5 postMessage</title>
        <style>
            #txt {
                width: 500px;
                height: 300px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <h1>The New Window</h1>
        <div id="txt"></div>
        <script>        
            window.onload = function() {
                var text = document.getElementById('txt');  
                //監聽函數，接收一個參數--Event事件對象
                function receiveMsg(e) {
                    console.log("Got a message!");
                    console.log("\nMessage: " + e.data);
                    console.log("\nOrigin: " + e.origin);
                    text.innerHTML = "Got a message!<br>" +
                        "Message: " + e.data +
                        "<br>Origin: " + e.origin;
                }
                if (window.addEventListener) {
                    //爲window註冊message事件並綁定監聽函數
                    window.addEventListener('message', receiveMsg, false);
                }else {
                    window.attachEvent('message', receiveMsg);
                }
            };
        </script>
    </body>
    </html>複製代碼