項(xiàng)目中的需求 需要外接一個(gè)iframe與主頁(yè)面之間需要通信 的情況

在iframe 中：

在主頁(yè)面中：

window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對(duì)于兩個(gè)不同頁(yè)面的腳本，只有當(dāng)執(zhí)行它們的頁(yè)面位于具有相同的協(xié)議（通常為https），

端口號(hào)（443為https的默認(rèn)值），以及主機(jī) (兩個(gè)頁(yè)面的模數(shù) Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。window.postMessage()

方法提供了一種受控機(jī)制來(lái)規(guī)避此限制，只要正確的使用，這種方法就很安全.

Window.postMessage(message, targetOrigin, [transfer]);

otherWindow:

其他窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過或數(shù)值索引的window.frames。

Window.open Window.opener HTMLIFrameElement.contentWindow(父窗體向子窗體發(fā)送消息) Window.parent(子窗體向父窗體發(fā)送消息) Window.frames +索引值

message:

將要發(fā)送到其他 window的數(shù)據(jù)。它將會(huì)被結(jié)構(gòu)化克隆算法序列化。這意味著你可以不受什么限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化。

targetOrigin:

通過窗口的origin屬性來(lái)指定哪些窗口能接收到消息事件，其值可以是字符串""（表示無(wú)限制）或者一個(gè)URI。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。這個(gè)機(jī)制用來(lái)控制消息可以發(fā)送到哪些窗口；例如，當(dāng)用postMessage傳送密碼時(shí)，這個(gè)參數(shù)就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預(yù)期接受者的origin屬性完全一致，來(lái)防止密碼被惡意的第三方截獲。如果你明確的知道消息應(yīng)該發(fā)送到哪個(gè)窗口，那么請(qǐng)始終提供一個(gè)有確切值的targetOrigin，而不是。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露到任何對(duì)數(shù)據(jù)感興趣的惡意站點(diǎn)。

transfer :

可選是一串和message 同時(shí)傳遞的 Transferable 對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。

window.addEventListener("message",function (event){ //do something , false); event對(duì)象有三個(gè)屬性，分別是origin，data和source。 event.data表示接收到的消息； event.origin表示postMessage的發(fā)送來(lái)源，包括協(xié)議，域名和端口； event.source表示發(fā)送消息的窗口對(duì)象的引用; 示例:A頁(yè)面中包含一個(gè)iframe,iframe加載B頁(yè)面(父窗體與子窗體通信)A頁(yè)面代碼:window.addEventListener('message', function(e) {if (e.data.test=="Test") {alert(e.data.test);} }, false);B頁(yè)面代碼: btnClick: function (o, e) {window.parent.postMessage({ test: "Test"}, "*");//{ test: "Test" }為data屬性,"*" 為origin屬性}A頁(yè)面中包含一個(gè)iframe,iframe加載B頁(yè)面(子窗體與父窗體通信)A頁(yè)面代碼:function btnClick(o, e) { document.getElementById("iframeContent").contentWindow.postMessage({ test: "Test"}); };B頁(yè)面代碼: window.addEventListener('message', function(e) {if (e.data.test=="Test") {alert(e.data.test);} }, false);

總結(jié)

以上是生活随笔為你收集整理的页面嵌套iframe(window.postMessage()实现跨域通信)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。