JS實現iframe中子父頁面跨域通訊的方法分析
本文例項講述了JS實現iframe中子父頁面跨域通訊的方法。分享給大家供大家參考，具體如下：
在非跨域的情況下，iframe中的子父頁面可以很方便的通訊，但是在跨域的情況下，只能通過window.postMessage()方法來向其他頁面傳送資訊，其他頁面要通過window.addEventListener()監聽事件來接收資訊；
#跨域傳送資訊
#window.postMessage()語法
otherWindow.postMessage(message,targetOrigin,[transfer]);
- otherWindow
其他視窗的一個引用，寫的是你要通訊的window物件。例如：在iframe中向父視窗傳遞資料時，可以寫成window.parent.postMessage()，window.parent表示父視窗。 - message
需要傳遞的資料，字串或者物件都可以。 -
targetOrigin
表示目標視窗的源，協議+域名+埠號，如果設定為“*”，則表示可以傳遞給任意視窗。在傳送訊息的時候，如果目標視窗的協議、域名或埠這三者的任意一項不匹配targetOrigin提供的值，那麼訊息就不會被髮送；只有三者完全匹配，訊息才會被髮送。例如：
window.parent.postMessage('hello world','http://xxx.com:8080/index.html')只有父視窗是http://xxx.com:8080時才會接受到傳遞的訊息。 -
[transfer]
可選引數。是一串和message 同時傳遞的 Transferable 物件，這些物件的所有權將被轉移給訊息的接收方，而傳送一方將不再保有所有權。我們一般很少用到。
#跨域接收資訊
需要監聽的事件名為"message"
window.addEventListener('message',function (e) {
console.log(e.data) //e.data為傳遞過來的資料
console.log(e.origin) //e.origin為呼叫 postMessage 時訊息傳送方視窗的 origin（域名、協議和埠）
console.log(e.source) //e.source為對傳送訊息的視窗物件的引用，可以使用此來在具有不同origin的兩個視窗之間建立雙向通訊
})#示例Demo
示例功能：跨域情況下，子父頁面互發資訊並接收。
- 父頁面程式碼：
<body>
<button onClick="sendInfo()">向子視窗傳送訊息</button>
<iframe id="sonIframe" src="http://192.168.2.235/son.html"></iframe>
<script type="text/javascript">
var info = {
message: "Hello Son!"
};
//傳送跨域資訊
function sendInfo(){
var sonIframe= document.getElementById("sonIframe");
sonIframe.contentWindow.postMessage(info,'*');
}
//接收跨域資訊
window.addEventListener('message',function(e){
alert(e.data.message);
},false);
</script>
</body>
- 子頁面程式碼
<body>
<button onClick="sendInfo()">向父視窗傳送訊息</button>
<script type="text/javascript">
var info = {
message: "Hello Parent!"
};
//傳送跨域資訊
function sendInfo(){
window.parent.postMessage(info,false);
</script>
</body>
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。