在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。

父页面parent.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title>

<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

    	function	ParentFunction() {

           alert('ParentFunction');

        }

    </script></head>

<body>

 <input type="button" id="btnCancel" class="button" value="测试"  />

 <iframe id="FRMdetail"  name="FRMdetail" frameborder="0"  src='child.html' style="width:100%;height:100%;" ></iframe>

</body>

</html>

子页面child.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title>

<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

 <script type="text/javascript">

        $(document).ready(function () {

            $("#btnTest").click(function (e) {

			  var t=window.parent;

			     t.ParentFunction();

            });

        })

    </script></head>

<body>

 <input type="button" id="btnTest" class="button" value="应该获取的值"  />rrr

</body>

</html>

网络上流行的方法 var t=window.parent;t.ParentFunction();在IE中能调用，可是在谷歌浏览器中总是提示如下错误，

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

网上找了很长时间都没法发现方法，有的也是很早以前的版本，基本上没用了，而且人云亦云，基本上没有测试过。于是自己摸索，后来才发现，谷歌浏览器其实那种方法其实也可以，只是很奇怪，必须发布后才可以，在文件系统中调用，就会出现上边的错误。


其实还有一种html5的方法postMessage，于是就根据着进行了改写，最终代码如下：


父页面parent.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title>

<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

	   this.ParentFunction= function() {//和注释掉的方法是一样的，也就是说加不加this都是一样的，因为此处的this就是windows

           alert('ParentFunction');

        }

 //   	function	ParentFunction() {

  //         alert('ParentFunction');

 //       }

	 function receiveMessage(e) {

	    var data = e.data;

		 if(data=="ParentFunction")

		 {

		   ParentFunction() ;

		 }

      }

      if (typeof window.addEventListener != 'undefined') {//使用html5 的postMessage必须处理的

      window.addEventListener('message', receiveMessage, false);

   } else if (typeof window.attachEvent != 'undefined') {

     window.attachEvent('onmessage', receiveMessage);

  }

    </script></head>

<body>

 <input type="button" id="btnCancel" class="button" value="测试"  />

 <iframe id="FRMdetail"  name="FRMdetail" frameborder="0"  src='child.html' style="width:100%;height:100%;" ></iframe>

</body>

</html>

子页面child.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title>

<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

 <script type="text/javascript">

        $(document).ready(function () {

            $("#btnTest").click(function (e) {

			  var t=window.parent;

			  if(!t.ParentFunction)//在不支持时，使用html5 的postMessage方法

			  {

			    t.postMessage("ParentFunction", '*');

			  }

              else

			  {

			     t.ParentFunction();

			  }

            });

        })

    </script></head>

<body>

 <input type="button" id="btnTest" class="button" value="应该获取的值"  />rrr

</body>

</html>

经过改写后，在文件系统中虽然也会出现那个错误，但需要调用的方法确实调用了，目的确实达到了，不影响使用了。

[置顶] js操作iframe兼容各种浏览器的更多相关文章

  1. JS 操作iframe

    很多人一直都有个想法,要是可以随心所欲的操作iframe就好了.这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力. 通过Javasc ...

  2. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  3. JS操作iframe

    1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...

  4. js操作iframe总结

    一 在父页面操作子页面   IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...

  5. JS操作iframe元素

    1.  demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...

  6. html5 video.js 使用及兼容所有浏览器

    废话少说,直接开始 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件:(必须放在文件的开头,也是说一定要放在video标签之前) 贴入htm ...

  7. [置顶] js对象

    js中,一切事物都是对象.对象是一切的基础. 而具体到某一个对象时. 对象则是包含一组变量和函数的集合实例 我们先来中体会下je对象的全局. 接下来就具体揭开这个对象的面纱吧 ja对象分类 Funct ...

  8. js操作iframe框架时应该屡清楚的一些概念

    1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...

  9. 加入收藏夹的js代码(求兼容chrome浏览器的代码)

    从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...

随机推荐

  1. BZOJ 1509: [NOI2003]逃学的小孩( 树形dp )

    树形dp求出某个点的最长3条链a,b,c(a>=b>=c), 然后以这个点为交点的最优解一定是a+2b+c.好像还有一种做法是求出树的直径然后乱搞... ----------------- ...

  2. 兼容现有jQuery API的轻量级JavaScript库：Zepo

    Zepo是一个JavaScript框架,其特点是兼容现有jQuery API的同时,自身体积十分小:它与jQuery有着类似的API.如果你会jQuery,那么也就会使用Zepto了. $('div' ...

  3. php 解析xml 的四种方法（转）

    XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...

  4. DX9三角形顶点绕序的判断

    今天亲自实践了下,终于搞清楚了. 多边形都有2个侧面,观察坐标系中正面朝向摄像机的为多边形为正面朝向多边形,正面偏离摄像机的为多边形为背面朝向多边形,d3d会把背面朝向多边形剔除,即背面消隐. 使用 ...

  5. IIS启动网站

    在启动一个网站前要先打开一个服务.可是Windows 的提示非常的奇怪: “除非 Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态,否则无法 ...

  6. 将四个BYTE数值转换成IEEE754标准的浮点数（两种方法：用Addr函数取字节数字的首地址，或者用Absolute关键字）

    在工作中,经常使用到IEEE754格式的数据.IEEE754格式的数据占四个字节,好像Motorola格式和Intel格式的还不一样. 由于工作中很少和他打交道(使用的软件内部已经处理),就没太在意. ...

  7. python 在 for i in range() 块中改变 i 的值的效果

    先上一段代码: for i in range(3): i = 2 print(i) 实际结果是: 2 2 2 可以发现实际效果就是 在每次执行 for 语句块的内容后 i 会被重新赋值

  8. PHP cURL 应用

    对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有 file_get_contents函数可以获取远程链接的数据,但是它的可控制性太差了,对于各种复杂情况的采集情 景,file_get_ ...

  9. border-radius 知识点

    border-radius:50px; 边框半径 CSS度量值都:em.px.百分比如果设置1个值,表示4个圆角都使用这个值.如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值 ...

  10. Winform获取当前程序名称或路径

    以下几种方法获取当前程序名称或路径: // 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径.      // 获 ...