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. Java核心知识点学习----多线程 倒计时记数器CountDownLatch和数据交换的Exchanger

    本文将要介绍的内容都是Java5中的新特性,一个是倒计时记数器---CountDownLatch,另一个是用于线程间数据交换的Exchanger. 一.CountDownLatch 1.什么是Coun ...

  2. mesos框架编译部署

    mesos是什么呢? 一个分布式调度框架,让你编写代码时面对整个集群像面对一台机器那么简单.所有的运行,资源调度都可以由它来帮你搞掂. 1.mesos安装有两种方式: 1)参考官网的getstart, ...

  3. java基础(1)-比较jdk5,jdk6,jdk7的新特性

    jdk8已经出来好长时间了,这里自己学习时简单总结的jdk5,jdk6和jdk7的新特性:本文提纲: 一.jdk5的新特性 二.jdk6的新特性 三.jdk7的新特性 一.jdk5的新特性 首先简单介 ...

  4. hdu 5792(树状数组，容斥) World is Exploding

    hdu 5792 要找的无非就是一个上升的仅有两个的序列和一个下降的仅有两个的序列,按照容斥的思想,肯定就是所有的上升的乘以所有的下降的,然后再减去重复的情况. 先用树状数组求出lx[i](在第 i ...

  5. SQL保留关键字不能用作表名

    com.microsoft.sqlserver.jdbc.SQLServerException: 关键字 'User' 附近有语法错误. 一看就是SQL语句错误,发现控制台console上打印出来的S ...

  6. Pojo类(plain ordinary java object)

    POJO有一些private的参数作为对象的属性.然后针对每个参数定义了get和set方法作为访问的接口.例如:public class User {private long id;private S ...

  7. 内存，堆，栈，heap，stack，data

    1. 基本类型占一块内存. 引用类型占两块. 2. 类是静态概念. 函数中定义的基本类型变量和对象的引用类型变量都在函数的栈内存. 局部变量存在栈内存. new创建的对象和数组,存在堆内存. java ...

  8. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  9. Apache配置多域名 AH00548: NameVirtualHost has no effect and will be removed in the next release

    httpd-vhosts.conf 中首行 NameVirtualHost *:80 删除掉即可解决.

  10. ios调用第三方程序打开文件，以及第三方调用自己的APP打开文件

    1.自己的APP调用第三方打开文件 主要是使用  UIDocumentInteractionController  类   并实现 UIDocumentInteractionControllerDel ...