我们经常会有父页面与iframe页面的操作，比如
</p> <p>这个iframe里面的内容是js写的。如以下代码</p> <div class="jb51code"> <pre class="brush:js;"> var iframe = document.getElementById("iframe"),doc = iframe.contentWindow.document; doc.open(); doc.write("---------something------"); doc.close();</pre> </div> <p>以上代码在大多数情况下是对的。但有种情况，即父页面显式的写了document.domain = "xxx";</p> <p>在ie系列（IE10没试过）会出现没权限的错误。 而在firefox,chrome都没问题.</p> <p>这是为什么呢?这是ie的一个bug,即父页没有显式的设置document.domain时，iframe会默认document.domain与父页面一致，即都是</p> <p>location.host,父子页面是可以进行通信，即文章头的例子， 但当父页面显式的设置了document.domain="",iframe里面的页面必须也显式的设置document.domain="xxx"，否则是</p> <p>没有权限得到iframe.contentWindow.document的， 即也没办法去动态写内容，其实也可以让iframe指向一个特定的页面，这个页面显式的设置document.domain="xxx",再通过文章开头的方</p> <p>的方式来写，但问题是我的父页面有很多这样的iframe,个数是未知的（都是广告位），所以也不能通过特定页面。</p> <p>这样问题就来了，在这种情况下，我们貌似没有办法</p> <p>1. 父页面设置了并且必须会显式的设置document.domain</p> <p>2.iframe页面的内容需要js动态生成。</p> <p>3.没有机会为iframe设置src。</p> <p>但上面3个条件都满足时，我们可以通过伪协议来解决此类的问题。</p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="26726" class="copybut" id="copybut26726" onclick="doCopy('code26726')"><U></U></a> 代码如下:</div><div class="codebody" id="code26726"> iframe.src="javascript:void((function(){var d=document;d.open();d.domain='xxx;d.write('---something');d.close()})())"; </div></p> <p>通过这种方式可以显式的设置iframe的document.domain与父页面一致。</p> <p>这样写了后，的确实现了动态写iframe内容的需求，但这个页面会单独弹出来，像window.open(); 这是为什么呢？ 这也是ie系列的bug,即父页面有<base target="_blank"></base>,通过iframe的伪协议所写的内容会类似window.open一样弹出新页面， 但父页面的<base>又必须是_self,所以只能在调用iframe.src之前将base的target设置为_self,内容写完后，再将base的target设为_blank</p> <p>这样就解决了此问题。</p> <p>虽然伪协议可以解决此问题，但也有些风险，如果不到万不得已，也别随便用这种方式。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/iframe/" class="tag_link" target="_blank">iframe</a><a href="https://m.jb51.cc/tag/weixieyi/" class="tag_link" target="_blank">伪协议</a><a href="https://m.jb51.cc/tag/fuyemian/" class="tag_link" target="_blank">父页面</a><a href="https://m.jb51.cc/tag/yemiantongxin/" class="tag_link" target="_blank">页面通信</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <img src="https://www.jb51.cc/res/2024/06-25/10/c2ff592921802094435e272834065656.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4770157.html" title="哪些JavaScript IDE最好用？">哪些JavaScript IDE最好用？</a> </div> <div class="summary">阅读本文之前，分享大家一张图片，看图会发现JavaScript开发...</div> </div><div class="list_con"> <img src="https://www.jb51.cc/res/2024/06-25/10/dfecc83f96185e42cd7d1ff7545b8f02.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4770156.html" title="异步编程之Javascript Promises 规范介绍">异步编程之Javascript Promises 规范介绍</a> </div> <div class="summary">Promises是一种关于异步编程的规范，目的是将异步处理对象和...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/js/4770155.html" title="超越Web，Javascript在物联网的应用">超越Web，Javascript在物联网的应用</a> </div> <div class="summary">引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 s...</div> </div><div class="list_con"> <img src="https://www.jb51.cc/res/2024/06-25/10/2031a5a8e4bd99df972567cc16471552.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4770154.html" title="JavaScript 常用功能总结">JavaScript 常用功能总结</a> </div> <div class="summary">小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了Java...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/js/4770153.html" title="微软Edge 内嵌的JavaScript 引擎即将开源">微软Edge 内嵌的JavaScript 引擎即将开源</a> </div> <div class="summary">微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，...</div> </div><div class="list_con"> <img src="https://www.jb51.cc/res/2024/06-25/10/eac411643d7dfd1bfda1fd783a249266.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4770152.html" title="1000多个项目中的十大JavaScript错误以及如何避免">1000多个项目中的十大JavaScript错误以及如何避免</a> </div> <div class="summary">通过统计数据库中的1000多个项目，我们发现在 JavaScript 中...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>
