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);