postMessage的用法

postMessage()方法允許來自不同源的腳本采用異步方式進行有限的通信，可以實現跨文本檔、多窗口、跨域消息傳遞。

 

例子：

1.消息發送：

postMessage(data,origin)方法接受兩個參數

 1.data:要傳遞的數據，html5規范中提到該參數可以是JavaScript的任意基本類型或可復制的對象，然而並不是所有瀏覽器都做到了這點兒，部分瀏覽器只能處理字符串參數，所以我們在傳遞參數的時候需要使用JSON.stringify()方法對對象參數序列化，在低版本IE中引用json2.js可以實現類似效果。

2.origin：字符串參數，指明目標窗口的源，協議+主機+端口號[+URL]，URL會被忽略，所以可以不寫，這個參數是為了安全考慮，postMessage()方法只會將message傳遞給指定窗口，當然如果願意也可以建參數設置為"*"，這樣可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。

<iframe onLoad="loadIFreamSite()" id="loadIframeSite" src="" frameborder="0" scrolling="no" allowtransparency=true style="width: 100%;" ></iframe>

function getSiteTree(flag) {

　　$("#loadIframeSite").attr("src","http://192.168.1.78:8080/communityEdu/adminManage/chooseSite.bsh");

　　$("#loadIframeSite").attr("flag",flag);

}

function loadIFreamSite(){

　　var ifr = document.querySelector('#loadIframeSite');

 　　ifm.height=document.documentElement.clientHeight;//自適應高度

　　 ifr.contentWindow.postMessage({a: 1}, '*');

}

 

2.消息接收監聽：

MessageEvent對象：

1. data：顧名思義，是傳遞來的message
2. source：發送消息的窗口對象
3. origin：發送消息窗口的源（協議+主機+端口號）

window.addEventListener('message', function(e) {

　　if($("#loadIframeSite").attr("flag") != "" && $("#loadIframeSite").attr("flag") != undefined)

　　{

　　if( e.data.flag == "success")

　　{

　　$("#siteModal").modal("hide");

　　}

} }, true);