iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。

一、同域下父子页面的通信

父页面 parent.html

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function say() {
  5. alert("parent.html------>I'm at parent.html");
  6. }
  7. function callChild()
  8. {
  9. //document.frames["myFrame"].window.say();//只适用于ie浏览器
  10. myFrame.window.say();
  11. myFrame.window.document.getElementById("button").value="我变了";
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <input type=button value="调用child.html中的函数say()" onclick="callChild()">
  17. <iframe name="myFrame" src="child.html"></iframe>
  18. </body>
  19. </html>

子页面 child.html

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function say()
  5. {
  6. alert("child.html--->I'm at child.html");
  7. }
  8. function callParent() {
  9. parent.say();
  10. parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <input id="button" type=button value="调用parent.html中的say()函数" onclick="callParent()">
  16. </body>
  17. </html>

方法调用

如上面示例所示父页面调用子页面的方法可通过：FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法：parent.window.parentMethod();

DOM元素访问

根据FrameName.window得到了子窗口对象之后，再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过document.getElementById(),document.getElementsByName()[index]。如：parent.window.document.getElementsByName("myFrame")[0],myFrame.window.document.getElementById("button")其中的window都是可以省略的。

注意事项

要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：
1.在Iframe上用onload事件;
2.用document.readyState=="complete"来判断

二、跨域父子页面通信方法

如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。

父页面向子页面传递数据

实现的技巧就是利用 location 对象的 hash 值，通过它传递通信数据，我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串（data就是你要传递的数据），然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了，其实常用的一种方式就是：
1. 在 子页面 中通过 setInterval 方法设置定时器， 监听 location.href 的变化即可获得上面的 data 信息
2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。

子页面向父页面传递数据

实现的技巧就是利用一个代理 Iframe C，它嵌入到 子页面中，并且和父页面必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A ，因为，iframeC 和主页面是同域的，所以它们之间传递数据就变得简单多了，属于同域名下的通信问题了，如前面所讨论的，在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent)，它返回对载入浏览器得最顶层 window 对象的引用，这样我们就能直接条用父页面中方法啦。

iframe 使用的更多相关文章

  1. 完美判断iframe是否加载完成

    var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...

  2. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. iframe用法

    <iframe src="http://caiyanli.top/" height="500"  width="500" frameb ...

  5. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  6. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  7. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  8. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  9. 解决iframe作为子窗口，刷新后iframe页面跳转到其它页面的问题

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗 ...

  10. 三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

随机推荐

  1. String与StringBuffer的区别

    首先,String和StringBuffer主要有2个区别: (1)String类对象为不可变对象,一旦你修改了String对象的值,隐性重新创建了一个新的对象,释放原String对象,StringB ...

  2. python学习笔记-Day7

    class Province: # 静态字段(类变量/属性) country ＝ '中国' def __init__(self, name): # 普通字段(实例变量/属性) self.name = ...

  3. db2 进程

    DB2 通用数据库进程全接触 Dwaine Snow, DB2 UDB 和 Informix IDS 产品经理, IBM 多伦多实验室 Dwaine Snow 是 DB2 UDB 分区数据库以及查询巡 ...

  4. Python.Scrapy.14-scrapy-source-code-analysis-part-4

    Scrapy 源代码分析系列-4 scrapy.commands 子包 子包scrapy.commands定义了在命令scrapy中使用的子命令(subcommand): bench, check, ...

  5. 遇到的check the manual that corresponds to your MySQL server version for the right syntax错误

    遇到的check the manual that corresponds to your MySQL server version for the right syntax错误. 结果发现是SQL关键 ...

  6. Android（Xamarin）之旅（四）

    这么晚了,可能也因为一点事情,就说打开博客园看看,结果 http://www.cnblogs.com/mindwind/p/5125248.html 这篇文章瞬间吸引了我.暗暗的回想一下,十年之后,我 ...

  7. Android音频系统之AudioFlinger(四)

    http://blog.csdn.net/xuesen_lin/article/details/8805096 1.1.1 AudioMixer 每一个MixerThread都有一个唯一对应的Audi ...

  8. 初学layer-------web框架

    第一步,文件的下载   http://layer.layui.com/ 第二步,文件的部署即将包放到web端的相关目录下. 第三步,引用layer.js(此框架是基于jquery的)所以要先引用jqu ...

  9. <雨季>

    忘不了节后漫长的雨季,灰暗阴冷的天气,潮湿的心情,总让我怀念家乡刺眼的阳光,即使在寒冷的冬季,唯有那窗外的紫荆花独自开放.飘落满地,给灰色的世界增添点色彩,合着同学们上早课的笑声,暂时排遣那一份思乡情 ...

  10. Java将文本写入字符输出流，缓冲各个字符，从而提供单个字符、数组和字符串的高效写入。

    java.io 类 BufferedWriter java.lang.Object java.io.Writer java.io.BufferedWriter BufferedWriter publi ...