首頁  >  文章  >  web前端  >  透過偽協定解決父頁面與iframe頁面通訊的問題_javascript技巧

透過偽協定解決父頁面與iframe頁面通訊的問題_javascript技巧

WBOY
WBOY原創
2016-05-16 16:05:461245瀏覽

我們常常會有父頁與iframe頁面的操作,例如

這個iframe裡面的內容是js寫的。如以下程式碼

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

以上程式碼在大多數情況下是對的。但有種情況,即父頁明確的寫了document.domain = "xxx";

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

這是為什麼呢?這是ie的一個bug, 即父頁沒有明確的設定document.domain時,iframe會預設document.domain與父頁一致,即都是

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

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

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

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

1. 父頁設定了且必須會明確的設定document.domain

2.iframe頁面的內容需要js動態產生。

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

但上面3個條件都滿足時,我們可以透過偽協議來解決這類的問題。

複製程式碼 程式碼如下:

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

透過這種方式可以明確的設定iframe的document.domain與父頁面一致。

這樣寫了後,的確實現了動態寫iframe內容的需求,但這個頁面會單獨彈出來,像window.open();
這是為什麼呢? 這也是ie系列的bug ,即父頁面有, 透過iframe的偽協定所寫的內容會類似window.open一樣彈出新頁面,
但父頁面的又必須是_self, 所以只能在呼叫iframe.src之前將base的target設定為_self, 內容寫完後,再將base的target設為_blank

這樣就解決了這個問題。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn