跨域訪問方法介紹(5)--使用 window.postMessage 傳遞資料-有解無憂

postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，可以用于視窗間訊息的傳遞：頁面和其打開的新視窗的資料傳遞、頁面與嵌套的frame訊息傳遞、頁面與嵌套的iframe訊息傳遞，本文主要介紹通過使用 postMessage 方法來實作不同域下頁面間的通信，文中所使用到的軟體版本：Chrome 90.0.4430.212，

1、語法

1.1、發送訊息

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow
其他視窗的一個參考，比如 iframe 的 contentWindow 屬性、執行 window.open 回傳的視窗物件、或者是命名過或數值索引的 window.frames，

message
將要發送到其他 window的資料，它將會被結構化克隆演算法序列化，這意味著你可以不受什么限制的將資料物件安全的傳送給目標視窗而無需自己序列化，

targetOrigin
通過視窗的 origin 屬性來指定哪些視窗能接收到訊息事件，其值可以是字串 "*"（表示無限制）或者一個URI，在發送訊息的時候，如果目標視窗的協議、主機地址或埠這三者的任意一項不匹配 targetOrigin 提供的值，那么訊息就不會被發送；只有三者完全匹配，訊息才會被發送，這個機制用來控制訊息可以發送到哪些視窗；例如，當用 postMessage 傳送密碼時，這個引數就顯得尤為重要，必須保證它的值與這條包含密碼的資訊的預期接受者的 origin 屬性完全一致，來防止密碼被惡意的第三方截獲，如果你明確的知道訊息應該發送到哪個視窗，那么請始終提供一個有確切值的 targetOrigin，而不是*，不提供確切的目標將導致資料泄露到任何對資料感興趣的惡意站點，

transfer(可選)
是一串和 message 同時傳遞的 Transferable 物件，這些物件的所有權將被轉移給訊息的接收方，而發送一方將不再保有所有權，

1.2、接受訊息

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  if (event.origin !== "http://example.org:8080") {
    return;
  }

  //...
}

event 的屬性有:

data
從其他 window 中傳遞過來的物件，

origin
呼叫 postMessage 時訊息發送方視窗的 origin，

source
對發送訊息的視窗物件的參考; 您可以使用此來在具有不同 origin 的兩個視窗之間建立雙向通信，

2、樣例

在 http://a.com:8080/a.html 打開 http://b.com:8080/b.html，然后在 a.html 給 b.html 頁面發送訊息，b.html 回訊息給 a.html，

2.1、模擬域名訪問

在 C:\Windows\System32\drivers\etc\hosts 檔案中增加：

127.0.0.1 a.com
127.0.0.1 b.com

2.2、a.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父頁面</title>
<script type="text/javascript">
    var child;
    function openChild() {
        child = window.open("http://b.com:8080/b.html");
    }
    function sendMessage() {
      child.postMessage("該訊息來自父頁面", "http://b.com:8080");
    }
    
    function receiveMessage(event) {
        if (event.origin !== "http://b.com:8080") {
            alert('來源不可信:' + event.origin);
            return;
        }
        alert(event.data);
    }
    
    window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
    <button onclick="openChild()">打開子頁面</button>
    <button onclick="sendMessage()">發送訊息到子頁面</button>
</body>

</html>

2.3、b.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子頁面</title>
<script type="text/javascript">
    function receiveMessage(event) {
        if (event.origin !== "http://a.com:8080") {
            alert('來源不可信:' + event.origin);
            return;
        }
        alert(event.data);
        
        event.source.postMessage("該訊息來自子頁面", event.origin);
    }
    
    window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
    子頁面
</body>

</html>

2.4、部署訪問

把 a.html 和 b.html 放到 tomcat 的 webapps\ROOT 下，訪問地址為：http://a.com:8080/a.html，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/288514.html

標籤：HTML5

上一篇：call、apply和bind方法的用法、區別和使用場景

下一篇：前端工程化實體簡介（Node.js，NPM，Webpack，前端框架)