通過偽協(xié)議解決父頁面與iframe頁面通信的問題
我們經(jīng)常會有父頁面與iframe頁面的操作，比如
<iframe id = "iframe"></iframe>
這個(gè)iframe里面的內(nèi)容是js寫的。如以下代碼
var iframe = document.getElementById("iframe"),
doc = iframe.contentWindow.document;
doc.open();
doc.write("---------something------");
doc.close();
以上代碼在大多數(shù)情況下是對的。但有種情況，即父頁面顯式的寫了document.domain = "xxx";
在ie系列（IE10沒試過）會出現(xiàn)沒權(quán)限的錯(cuò)誤。 而在firefox, chrome都沒問題.
這是為什么呢?這是ie的一個(gè)bug, 即父頁沒有顯式的設(shè)置document.domain時(shí)，iframe會默認(rèn)document.domain與父頁面一致，即都是
location.host,父子頁面是可以進(jìn)行通信，即文章頭的例子， 但當(dāng)父頁面顯式的設(shè)置了document.domain="", iframe里面的頁面必須也顯式的設(shè)置document.domain="xxx"，否則是
沒有權(quán)限得到iframe.contentWindow.document的， 即也沒辦法去動(dòng)態(tài)寫內(nèi)容，其實(shí)也可以讓iframe指向一個(gè)特定的頁面，這個(gè)頁面顯式的設(shè)置document.domain="xxx",再通過文章開頭的方
的方式來寫，但問題是我的父頁面有很多這樣的iframe,個(gè)數(shù)是未知的（都是廣告位），所以也不能通過特定頁面。
這樣問題就來了，在這種情況下，我們貌似沒有辦法
1. 父頁面設(shè)置了并且必須會顯式的設(shè)置document.domain
2.iframe頁面的內(nèi)容需要js動(dòng)態(tài)生成。
3.沒有機(jī)會為iframe設(shè)置src。
但上面3個(gè)條件都滿足時(shí)，我們可以通過偽協(xié)議來解決此類的問題。
iframe.src="javascript:void((function(){var d=document;d.open();d.domain='xxx;d.write('---something');d.close()})())";
通過這種方式可以顯式的設(shè)置iframe的document.domain與父頁面一致。
這樣寫了后，的確實(shí)現(xiàn)了動(dòng)態(tài)寫iframe內(nèi)容的需求，但這個(gè)頁面會單獨(dú)彈出來，像window.open();
這是為什么呢？ 這也是ie系列的bug ,即父頁面有<base target="_blank"></base>, 通過iframe的偽協(xié)議所寫的內(nèi)容會類似window.open一樣彈出新頁面，
但父頁面的<base>又必須是_self, 所以只能在調(diào)用iframe.src之前將base的target設(shè)置為_self, 內(nèi)容寫完后，再將base的target設(shè)為_blank
這樣就解決了此問題。
雖然偽協(xié)議可以解決此問題，但也有些風(fēng)險(xiǎn)，如果不到萬不得已，也別隨便用這種方式。
相關(guān)文章
今天小編就為大家分享一篇layui樹形菜單動(dòng)態(tài)遍歷的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
小程序如何在不同設(shè)備上自適應(yīng)生成海報(bào)的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序如何在不同設(shè)備上自適應(yīng)生成海報(bào)的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js實(shí)現(xiàn)當(dāng)前輸入框高亮顯示的方法
這篇文章主要介紹了js實(shí)現(xiàn)當(dāng)前輸入框高亮顯示的方法,涉及javascript針對輸入框樣式動(dòng)態(tài)設(shè)置的技巧,非常美觀大方,簡單實(shí)用,需要的朋友可以參考下2015-08-08
寫任何編程代碼，不同的開發(fā)者都會有不同的見解。但參考一下總是好的，下面是來自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫技巧，Sofish翻譯(1,2)。2011-01-01
這篇文章主要介紹了js實(shí)現(xiàn)YouKu的漂亮搜索框效果的方法,通過javascript結(jié)合鼠標(biāo)事件與頁面樣式實(shí)現(xiàn)漂亮的搜索框效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
抖音小程序一鍵獲取手機(jī)號的實(shí)現(xiàn)思路
前端通過code獲取sessionkey,再用sessionkey解密手機(jī)號加密信息,PHP后端實(shí)現(xiàn)這一過程,本文通過實(shí)例代碼給大家介紹抖音小程序一鍵獲取手機(jī)號功能,感興趣的朋友一起看看吧2025-01-01
JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法,可實(shí)現(xiàn)在底部的兩個(gè)框架中同時(shí)顯示兩個(gè)搜索引擎的搜索結(jié)果,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要給大家分享了一位C#程序員入門學(xué)習(xí)微信小程序的筆記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了javascript for循環(huán)性能測試,結(jié)合實(shí)例形式分析了javascript使用for循環(huán)遍歷數(shù)組的三種常用方法及對應(yīng)的時(shí)間消耗,總結(jié)javascript使用for循環(huán)遍歷數(shù)組的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
深入淺出理解JavaScript高級定時(shí)器原理與用法
這篇文章主要介紹了JavaScript高級定時(shí)器原理與用法,結(jié)合實(shí)例形式分析了javascript重復(fù)定時(shí)器相關(guān)問題與解決方法,并描述了函數(shù)節(jié)流的原理與相關(guān)操作方法,需要的朋友可以參考下2018-08-08