在做项目时，遇到了操作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. nginx install

    ./configure --prefix=/home/allen.mh/local/nginx --with-http_ssl_module --with-http_sub_module --with ...

  2. 原生js动态改变dom高度

    item参数为要改变高度的dom,maxHight参数为dom的最大高度,speed参数为改变高度的速度function addHeight(item,maxHight,speed){ var ite ...

  3. ThinkPHP第二十二天(表单令牌、相对路径、扩展配置载入、$Think获取系统变量、$_SERVER('HTTP_REFERER')前页地址)

    1.表单令牌开启配置 'TOKEN_ON'=>true 2.相对路径:在thinkphp中,存在单入口index.php,所以程序中的根目录都是以index.php所在的文件夹为根目录,故用./ ...

  4. hdu 3530 Subsequence 单调队列

    题目链接 题目给出n个数, 一个下界m, 一个上界k, 让你求出最长的一段序列, 满足这段序列中的最大的数-最小的数<=k&&>=m, 输出这段长度. 可以维护两个队列, ...

  5. 《Pointers On C》读书笔记(第三章 数据)

    1．在C语言中,仅有4种基本数据类型:整型.浮点型.指针和聚合类型(如数组和结构等). 整型家族包括字符.短整型.整型和长整型,它们都分为有符号和无符号两种. 标准规定整型值相互之间大小的规则:长整型 ...

  6. Java中的枚举类型详解

    枚举类型介绍 枚举类型(Enumerated Type) 很早就出现在编程语言中,它被用来将一组类似的值包含到一种类型当中.而这种枚举类型的名称则会被定义成独一无二的类型描述符,在这一点上和常量的定义 ...

  7. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  8. Linux下安装memcached

    Linux下安装memcached 1.运行memcached需要本文开头介绍的libevent库 $ sudo yum install libevent libevent-deve 2.下载安装me ...

  9. ［spring+springmvc+mybatis实践］学生社团管理系统

    一.简介 ssm框架为现在十分流行的mvc主流框架.mybatis负责与数据库交互,springmvc与spring完美适配,负责控制器和视图渲染.之前有初步学习过ssm框架,这次借学校里的web课设 ...

  10. java面试核心基础（1）

    1.以下代码的执行结果 String s1 = "helloworld"; String s2 = "hello" + new Stirng("wor ...