在做项目时，遇到了操作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. 解决ListView 和ScroolView 共存 listItem.measure(0, 0) 空指针

    在网上找到ListView 和ScroolView 共存的方法无非是给他每个listview 重新增加高度,但是android 的设计者始终认为这并不是一种好的实现方法.但是有的时候有必须要用这种蛋疼 ...

  2. 一次U盘安装Ubuntu双系统实录

    准备:Win7系统(原来就在我电脑的系统) UltraISO(把系统写进U盘的工具) EasyBCD(双系统引导修复工具) 笔记本电脑(我的是联想Y470N) U盘一个 步骤: U盘准备工作: 插入U ...

  3. URL伪静态设置 (apache2.4)

    ` ` 1.修改apche主配置文件 主要是 #LoadModule rewrite_module modules/mod_rewrite.so 改为 LoadModule rewrite_modul ...

  4. PHP判断是中文还是英文

    static function ischinese($s){ $allen = preg_match("/^[^/x80-/xff]+$/", $s); //判断是否是英文 $al ...

  5. 为什么要for循环以及for循环的流程

    /* Name:为什么需要循环以及for循环流程 Copyright: By.不懂网络 Author: Yangbin Date:2014年2月10日 03:16:55 Description:求1 ...

  6. 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

    原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...

  7. Android Activity和Fragment传递数据

    1.Activity与Activity传递数据 UserLoginActivity.java: Intent welcomePage = new Intent(); Bundle dataBundle ...

  8. perl笔记

    更精确的空白字符串匹配 1.水平空白字符 Perl5.10之前,使用\s这种分类,不够精确,容易导致意料外的结果: Perl5.10中引入\h字符组,用来匹配任意水平空白字符(包括Unicode字符集 ...

  9. Oracle 11g RAC database on ASM, ACFS or OCFS2

    I see a lot of questions on shared file systems that can be used when people move from single instan ...

  10. Linux-NGINX 能否添加P3P头，如何添加。 - 德问:编程社交问答

    Linux-NGINX 能否添加P3P头,如何添加. - 德问:编程社交问答   您的投票让 杜鑫 声誉值增加5分. 支持投票,不仅能让提问用户获得声誉值,让好的问题有更多的曝光,更能帮助社区筛选出好 ...