在做项目时，遇到了操作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 2301: [HAOI2011]Problem b( 数论 )

    和POI某道题是一样的...  http://www.cnblogs.com/JSZX11556/p/4686674.html 只需要二维差分一下就行了. 时间复杂度O(MAXN + N^1.5) - ...

  2. 转载：js 创建对象、属性、方法

    1,自定义对象. 根据JS的对象扩展机制,用户可以自定义JS对象,这与Java语言有类似的地方. 与自定义对象相对应的是JS标准对象,例如Date.Array.Math等等. 2,原型(prototy ...

  3. Radio Checkbox Select 操作

    一个小总结 <!DOCTYPE html> <html> <head> <meta name="description" content= ...

  4. Linux搭建FTP

    Linux FTP 服务器配置简单说明 转载:http://blog.csdn.net/tianlesoftware/article/details/6151317

  5. 第八届河南省赛C.最少换乘（最短路建图）

    C.最少换乘 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 94  Solved: 25 [Submit][Status][Web Board] De ...

  6. FPGA STA(静态时序分析)

    1 FPGA设计过程中所遇到的路径有输入到触发器,触发器到触发器,触发器到输出,例如以下图所看到的: 这些路径与输入延时输出延时,建立和保持时序有关. 2. 应用背景 静态时序分析简称STA,它是一种 ...

  7. OpenVPN多处理之-多队列TUN多线程

    1.有一点不正确劲 在改动了那个TUN驱动后,我在想,为何我总是对一些驱动程序进行修修补补而从来不从应用程序找解决方式呢?我改动了那个TUN驱动,可是能保证我的改动对别的应用一样可用吗?难道TUN驱动 ...

  8. Css Rest 方法

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的 ...

  9. sublime test3 使用技巧

    sublimeText3使用技巧 常用快捷键 ctrl+d :选中光标处的文本单元,继续按ctrl+d选中相同文本单元 alt+F3 :功能和ctrl+d类似,用于批量修改相同文本 shift+↑ ↓ ...

  10. iOS 10 因苹果健康导致闪退 crash

    如果在app中调用了苹果健康,iOS10中会出现闪退.控制台报出的原因是: Terminating app due to uncaught exception 'NSInvalidArgumentEx ...