通過偽協(xié)議解決父頁面與iframe頁面通信的問題

更新時間：2015年04月05日 23:14:58 投稿：mdxy-dxy

這篇文章主要介紹了通過偽協(xié)議解決父頁面與iframe頁面通信的問題,需要的朋友可以參考下

我們經常會有父頁面與iframe頁面的操作，比如

這個iframe里面的內容是js寫的。如以下代碼

var iframe = document.getElementById("iframe"),
  doc = iframe.contentWindow.document;
doc.open();
doc.write("---------something------");
doc.close();

以上代碼在大多數情況下是對的。但有種情況，即父頁面顯式的寫了document.domain = "xxx";

在ie系列（IE10沒試過）會出現(xiàn)沒權限的錯誤。而在firefox, chrome都沒問題.

這是為什么呢?這是ie的一個bug, 即父頁沒有顯式的設置document.domain時，iframe會默認document.domain與父頁面一致，即都是

location.host,父子頁面是可以進行通信，即文章頭的例子，但當父頁面顯式的設置了document.domain="", iframe里面的頁面必須也顯式的設置document.domain="xxx"，否則是

沒有權限得到iframe.contentWindow.document的，即也沒辦法去動態(tài)寫內容，其實也可以讓iframe指向一個特定的頁面，這個頁面顯式的設置document.domain="xxx",再通過文章開頭的方

的方式來寫，但問題是我的父頁面有很多這樣的iframe,個數是未知的（都是廣告位），所以也不能通過特定頁面。

這樣問題就來了，在這種情況下，我們貌似沒有辦法

1. 父頁面設置了并且必須會顯式的設置document.domain

2.iframe頁面的內容需要js動態(tài)生成。

3.沒有機會為iframe設置src。

但上面3個條件都滿足時，我們可以通過偽協(xié)議來解決此類的問題。

復制代碼代碼如下:

iframe.src="javascript:void((function(){var d=document;d.open();d.domain='xxx;d.write('---something');d.close()})())";

通過這種方式可以顯式的設置iframe的document.domain與父頁面一致。

這樣寫了后，的確實現(xiàn)了動態(tài)寫iframe內容的需求，但這個頁面會單獨彈出來，像window.open();
這是為什么呢？這也是ie系列的bug ,即父頁面有<base target="_blank"></base>, 通過iframe的偽協(xié)議所寫的內容會類似window.open一樣彈出新頁面，
但父頁面的<base>又必須是_self, 所以只能在調用iframe.src之前將base的target設置為_self, 內容寫完后，再將base的target設為_blank

這樣就解決了此問題。

雖然偽協(xié)議可以解決此問題，但也有些風險，如果不到萬不得已，也別隨便用這種方式。

您可能感興趣的文章: