Window postMessage() 方法

Window 對象

postMessage() 方法用于安全地實作跨源通信。

參數

說明

otherWindow

其他視窗的一個引用，比如 iframe 的 contentWindow 屬性、執行 window.open 傳回的視窗對象、或者是命名過或數值索引的 window.frames。

message

将要發送到其他 window的資料。

targetOrigin

指定哪些視窗能接收到消息事件，其值可以是 *（表示無限制）或者一個 URI。

transfer

可選，是一串和 message 同時傳遞的 Transferable 對象。這些對象的所有權将被轉移給消息的接收方，而發送一方将不再保有所有權。

Chrome 1

Edge 12

Firefox 8

Safari 4

Opera 9.5

<div>

</div>

<p>你的浏覽器不支援 iframe。</p>

</iframe>

window.onload = function() {

var receiver = document.getElementById('receiver').contentWindow;

var btn = document.getElementById('sendMessage');

btn.addEventListener('click', function (e) {

e.preventDefault();

var val = document.getElementById('text').value;

receiver.postMessage("Hello "+val+"！", "https://c.runoob.com");

});

}

</script>

接收程式有一個事件監聽器，監聽 "message" 事件，同時我們要驗證消息來源位址，以確定是個可信的發送位址。

Hello World!

var messageEle = document.getElementById('recMessage');

window.addEventListener('message', function (e) { // 監聽 message 事件

alert(e.origin);

if (e.origin !== "https://www.runoob.com") { // 驗證消息來源位址

return;

messageEle.innerHTML = "從"+ e.origin +"收到消息： " + e.data;

e.source – 消息源，消息的發送視窗/iframe。

e.origin – 消息源的 URI(可能包含協定、域名和端口)，用來驗證資料源。

e.data – 發送過來的資料。

Window postMessage() 方法