跨文檔消息傳遞 postMessage
阿新 • • 發佈：2018-03-06
窗口 mark 註銷 event markdown on() span mage 所在 在
在
一、跨文檔消息傳遞
1. postMessage
發送信息
向當前頁面的 <iframe> 元素傳送數據
// 接收方window對象.postMessage( "message", "接收方域名" );
var iframeWindow = document.getElementById("myframe").contentWindow; //contentWindow
iframeWindow.postMessage("a secret","http://www.wrox.com"); //向內嵌框架發送消息接收信息
該方法觸發接收方 window 對象的 message 事件，並且傳遞個 onmessage處理程序的 event
- data：postMessage()第一個參數傳過來的 message，最好只傳字符串 (結合：
JSON.stringify(), JSON.parse()) - origin: 發生消息的文檔所在的域
- source: 發送消息的文檔的 window對象代理
//接收到其他窗口發送過來的信息
window.addEventListener("message", function(event){
event.source.postMessage("收到"，event.origin) //向原窗口發送回執
})2. 例子
外層 top 窗口 和 內層 iframe 窗口可進行通信，top 窗口可發送消息給 iframe 窗口，iframe 在接受到消息後返回 ‘Ok‘ 作為回應；iframe 也可以發送信息給 window，不過為了避免兩個窗口無限的互發 ‘Ok‘ 回應信息，top 窗口在收到信息後不給予回應。
在 http://localhost:3000 域下頁面代碼
<style>
#textarea{
width: 300px;
height: 100px;
}
</style>
<body>
<h1>TOP</h1>
<p id="localOrigin"></p>
<button id="button">發信息給 iframe</button><br/>
<textarea id="textarea"></textarea> 在 https://czsheng.cn:8080 域下頁面代碼
<style>
#textarea{
width: 300px;
height: 100px;
}
</style>
<body>
<h1>Iframe</h1>
<p id="localOrigin"></p>
<button id="button">發送信息給 Top window</button><br/>
<textarea id="textarea"></textarea>
<div id="message"></div>
</body>
<script>
document.getElementById(‘localOrigin‘).innerHTML = ‘我的域名為：‘ + window.location.origin;
window.addEventListener("message", function(event){
var messageBox = document.getElementById("message");
var msg = "【origin】:" + event.origin + "<br/>"
+ "【message】:" + event.data + "<br/>"
messageBox.innerHTML = msg
setTimeout(function(){
event.source.postMessage("--------------------OK--------------------", event.origin)
}, 1000)
})
document.getElementById("button").addEventListener("click",function(){
var text = document.getElementById("textarea").value;
top.postMessage(text, "http://localhost:3000")
})
</script>
</html>註意
轉載、引用，但請標明作者和原文地址
跨文檔消息傳遞 postMessage