項目中的需求 需要外接一個iframe與主頁面之間需要通信 的情況

在iframe 中：

在主頁面中：

window.postMessage() 方法可以安全地實現跨源通信。通常，對于兩個不同頁面的腳本，只有當執行它們的頁面位于具有相同的協議（通常為https），

端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage()

方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全.

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

otherWindow:

其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。

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

message:

將要發送到其他 window的數據。它將會被結構化克隆算法序列化。這意味著你可以不受什么限制的將數據對象安全的傳送給目標窗口而無需自己序列化。

targetOrigin:

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

transfer :

可選是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。