利用window.postMessage()實現跨域消息傳遞（JavaScript）

時間 2019-11-16

標籤利用 window.postmessage window postmessage 實現消息傳遞 javascript 欄目 Windows 简体版

原文原文鏈接

說明

window.postMessage()方法能夠安全地實現Window對象之間的跨域通訊。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的iframe之間。javascript

一般狀況下，不一樣頁面上的腳本容許彼此訪問，當且僅當它們源自的頁面共享相同的協議，端口號和主機（也稱爲「同源策略」）。window.postMessage()提供了一個受控的機制來安全地規避這個限制（若是使用得當的話）。html

通常來講，一個窗口能夠得到對另外一個窗口的引用(例如，經過targetWindow=window.opener)，而後使用targetWindow.postMessage()在其上派發MessageEvent。接收窗口隨後可根據須要自行處理此事件。傳遞給window.postMessage()的參數經過事件對象暴露給接收窗口。java

發送端

postMessage程序

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
});

發送消息的基本語法：

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

targetWindow

targetWindow就是接收消息的窗口的引用。得到該引用的方法包括：算法

Window.open
Window.opener
HTMLIFrameElement.contentWindow
Window.parent
Window.frames +索引值

message

message就是要發送到目標窗口的消息。數據使用結構化克隆算法進行序列化。這意味着咱們能夠將各類各樣的數據對象安全地傳遞到目標窗口，而無需本身對其進行序列化。跨域

targetOrigin

targetOrigin就是指定目標窗口的來源，必須與消息發送目標相一致，能夠是字符串「」或URI。 表示任何目標窗口均可接收，爲安全起見，請必定要明確提定接收方的URI。瀏覽器

transfer

transfer是可選參數安全

接收端

目標窗口經過執行下面的JavaScript來偵聽發送過來的消息：post

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}

event對象有三個屬性，分別是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的發送來源，包括協議，域名和端口；event.source表示發送消息的窗口對象的引用; 咱們能夠用這個引用來創建兩個不一樣來源的窗口之間的雙向通訊。code

完整程序

發送程序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空間-window.postMessage()跨域消息傳遞</title>
</head>
<body>
<div>
    <input id="text" type="text" value="42度空間" />
    <button id="send" >發送消息</button>
</div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60">
    <p>你的瀏覽器不支持IFrame。</p>
</iframe>
<script>
    window.onload = function() {
        var receiver = document.getElementById('receiver').contentWindow;
        var btn = document.getElementById('send');
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            var val = document.getElementById('text').value;
            receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
        });
    }
</script>
</body>
</html>

接收程序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空間-從www.42du.cn接收消息</title>
</head>
<body>
<div id="message">
    Hello World!
</div>
<script>
    window.onload = function() {
        var messageEle = document.getElementById('message');
        window.addEventListener('message', function (e) {
            alert(e.origin);
            if (e.origin !== "http://www.42du.cn") {
                return;
            }
            messageEle.innerHTML = "從"+ e.origin +"收到消息： " + e.data;
        });
    }
</script>
</body>
</html>