window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如,在一個頁面和它生成的彈出窗口之間,或者是頁面和嵌入其中的iframe之間。
通常情況下,不同頁面上的腳本允許彼此訪問,當且僅當它們源自的頁面共享相同的協議,端口號和主機(也稱爲“同源策略”)。window.postMessage()提供了一個受控的機制來安全地規避這個限制(如果使用得當的話)。
一般來說,一個窗口可以獲得對另一個窗口的引用(例如,通過targetWindow=window.opener),然後使用targetWindow.postMessage()在其上派發MessageEvent。接收窗口隨後可根據需要自行處理此事件。傳遞給window.postMessage()的參數通過事件對象暴露給接收窗口。
發送消息的基本語法:
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是可選參數
event對象有三個屬性,分別是origin,data和source。event.data表示接收到的消息;event.origin表示postMessage的發送來源,包括協議,域名和端口;event.source表示發送消息的窗口對象的引用; 我們可以用這個引用來建立兩個不同來源的窗口之間的雙向通信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>發送消息頁面</title>
</head>
<body>
<iframe src="./receive.html" id="receiver" width="600" height="500"></iframe>
<button id="btn">發送消息</button>
</body>
<script>
document.querySelector('#btn').onclick = function () {
document.getElementById('receiver').contentWindow.postMessage("Hello!", "http://localhost:9999");
alert('我發送信息給子窗口了!');
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>接受消息頁面</title>
</head>
<body>
<h1>我是接受參數的頁面</h1>
</body>
<script>
window.onload = function () {
var NUM = 0;
window.addEventListener('message', function (e) {
console.log(e);
let h1 = document.createElement('h1');
h1.innerHTML = '第' + (NUM++) + '條信息,' + e.data;
document.body.appendChild(h1);
});
}
</script>
</html>
運行結果: