在做项目时，遇到了操作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. 穿透的 div ( pointer-events )

    pointer-events 是一個滿有趣的 CSS3 屬性,雖然主要是針對 SVG ,但其中幾個屬性應用在 div 上也是頗有意思.顧名思義,這是一個針對滑鼠事件的屬性,預設值為 auto,若值為 ...

  2. A - 数塔

    A - 数塔 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  3. VC++学习之网络编程中的套接字

    VC++学习之网络编程中的套接字 套接字,简单的说就是通信双方的一种约定,用套接字中的相关函数来完成通信过程.应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问 ...

  4. (Problem 39)Integer right triangles

    If p is the perimeter of a right angle triangle with integral length sides, {a,b,c}, there are exact ...

  5. 关于 rand() 函数返回值的值域的疑问

    <C语言参考手册>中关于 rand() 函数有如下描述. (1)rand() 函数的原型 int rand(void); (2)连续调用 rand 将返回 0 到 int 类型的最大可表示 ...

  6. Java中print、printf、println的区别(转载)

    printf主要是继承了C语言的printf的一些特性,可以进行格式化输出 print就是一般的标准输出,但是不换行 println和print基本没什么差别,就是最后会换行 System.out.p ...

  7. SSD常见问题的技术分析

    AHCI对性能的影响 AHCI,全称Advanced Host Controller Interface,即高级主机控制器接口,是一种相比老旧的“IDE虚拟模式”更适合新一代SATA存储设备通信的协议 ...

  8. document.domain - JavaScript的同源策略问题:错误信息：Permission denied to access property 'document'_eecc00_百度空间

    document.domain - JavaScript的同源策略问题:错误信息:Permission denied to access property 'document'_eecc00_百度空间 ...

  9. 第七届河南省赛G.Code the Tree（拓扑排序+模拟）

    G.Code the Tree Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 35  Solved: 18 [Submit][Status][Web ...

  10. cocos2d-x过程动作CCProgressTo示例学习笔记

    // // SpriteProgressToRadial // //------------------------------------------------------------------ ...