通过伪协议解决父页面与iframe页面通信的问题

我们经常会有父页面与iframe页面的操作，比如

<iframe id = "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没试过）会出现没权限的错误。 而在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 ,即父页面有<base target="_blank"></base>, 通过iframe的伪协议所写的内容会类似window.open一样弹出新页面，
但父页面的<base>又必须是_self, 所以只能在调用iframe.src之前将base的target设置为_self, 内容写完后，再将base的target设为_blank

这样就解决了此问题。

虽然伪协议可以解决此问题，但也有些风险，如果不到万不得已，也别随便用这种方式。

赞 (0)

相关推荐

  • Iframe自适应高度绝对好使的代码 兼容IE,遨游，火狐

    复制代码 代码如下: <script type="text/javascript"> function reinitIframe(){ var iframe = document.getElementById("mainFrame"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.documen

  • JS解决iframe之间通信和自适应高度的问题

    JS解决iframe之间通信和自适应高度的问题

    首先说明下,iframe通信 分为:同域通信 和 跨域通信. 一. 同域通信 所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA">的B.html页面,这两个页面数据进行通信

  • Iframe自适应高度兼容ie,firefox多浏览器

    复制代码 代码如下: <script type="text/javascript">  function SetCwinHeight(){   var bobo=document.getElementById("bobo"); //iframe id   if (document.getElementById){    if (bobo && !window.opera){     if (bobo.contentDocument &am

  • 嵌入式iframe子页面与父页面js通信的方法

    本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信 父页面 parent.html: 复制代码 代码如下: <html> <head> <script type="text/javascr

  • iframe子页面与父页面在同域或不同域下的js通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html 复制代码 代码如下: <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say()

  • iframe跨域通信封装详解

    iframe跨域通信 查看演示        源码下载 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容. 用法举例: 需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法. 1. 在top页面中建立方法供内部页面使用 复制代码 代码如下: func

  • javascript 装载iframe子页面，自适应高度

    假设主页面有一个div,里面放置一个iframe 复制代码 代码如下: <div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • Iframe 自适应高度并实时监控高度变化的js代码

    google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用! 1.首先给出个Iframe. 复制代码 代码如下: <iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000" frameborder=&

  • iframe自适应高度的多种方法方法小结

    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. 复制代码 代码如下: function SetWinHeight(obj) { var win=obj; if (documen

  • 兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

    小项目龙里中学多媒体教室管理系统中后台管理用到了iframe.由于要动态载入内容,所以需要iframe自适应内容页的高度.用谷歌搜索到很多答案,其中成功的是这段代码 复制代码 代码如下: <script type="text/javascript"> function SetCwinHeight() { var iframeid = document.getElementById("maincontent1"); //iframe id if (docu

随机推荐