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

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

父页面 Parent.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Parent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script type="text/javascript">
function parentSay() {
alert("Parent.aspx------>I'm at Parent.aspx");
} function callChild()
{
//document.frames["myFrame"].window.say();//只适用于ie浏览器
myFrame.window.childSay();
myFrame.window.document.getElementById("button").value="我变了";
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="调用Child.aspx中的函数childSay()" onclick="callChild()">
<iframe name="myFrame" src="Child.aspx"></iframe>
</div>
</form>
</body>
</html>

子页面 Child.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Child" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script type="text/javascript">
function childSay() {
alert("Child.aspx--->I'm at Child.aspx");
}
function callParent() {
parent.parentSay();
parent.window.document.getElementsByName("myFrame")[0].style.color = "red";
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<input id="button" type="button" value="调用Parent.aspx中的parentSay()函数" onclick="callParent()">
</div>
</form>
</body>
</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
对象的引用,这样我们就能直接条用父页面中方法啦。

参考:

1.《SNS平台与第三方APP的JS通信实现》作者:Springwang。

2.iframe父子窗口间js方法调用 作者:moreorless。

3.IFrame问题汇总作者:dengwf

方法调用

如上面示例所示父页面调用子页面的方法可通过: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
对象的引用,这样我们就能直接条用父页面中方法啦。

参考:

1.《SNS平台与第三方APP的JS通信实现》作者:Springwang。

2.iframe父子窗口间js方法调用 作者:moreorless。

3.IFrame问题汇总作者:dengwf

其它资料:
jquery 父窗口 子窗口 相关操作

作者:Ljhero
出处:http://ljhero.cnblogs.com/
本作品采用署名-非商业性使用 3.0协议进行许可。欢迎转载,演绎,但是必须保留本文的署名Ljhero,且不能用于商业目的。

标签: web, iframe
绿色通道:
好文要顶
关注我
收藏该文与我联系
2
0
(请您对文章做出评价)
posted @ 2011-07-09 00:37 ljhero 阅读(10828) 评论(3) 编辑 收藏
评论列表

#1楼 2012-10-22 10:40 wodemyworld

好文章,mark~

#3楼 2014-01-02 10:06 ajaxian

值得好好学习学习

发表评论

昵称:

评论内容:





嵌入式iframe子页面与父页面js通信方式的更多相关文章

  1. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  2. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  3. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  4. ifream子页面与父页面互调

    function a1(x){ alert('父页面:' + x); } function acc(){ var frames = document.getElementById("dial ...

  5. 关于iframe/子窗体与父窗体的交互

    父子窗体交互方式 通过contentWindow交互 通过postMessage交互 通过contentWindow交互 主窗体内嵌的iframe或者是其通过js打开的新窗口都可以通过contentW ...

  6. html中iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素   parent.document.getElementById('id')和document相关的方法都可以这样用   2.父页面访问子页面元素   document.ge ...

  7. iframe子页面与父页面元素的访问以及js变量的访问[zhuan]

    https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html

  8. js处理iframe中子页面与父页面里面对象的取得的解决方案

    [1]子页面取得父页面的dom对象   parent.window.$('#id').val("");   [2]父页面取得子页面的对象   $(window.frames[&qu ...

  9. iframe子页面与父页面通信

    同域下父子页面的通信 父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

随机推荐

  1. hive-site.xml

    https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...

  2. 【Java】 异常

    异常分类 所有的异常都是由Throwable继承而来,但在下一层理解分解为两个类Error和Exception. Error类层次结构描述了Java运行时系统的内部错误和资源耗尽错误.应用程序不应该跑 ...

  3. matplotlib之scatter绘制散点

    # 使用matplotlib.pyplot.scatter绘制散点 import matplotlib.pyplot as plt from pylab import mpl # 设置默认字体,解决中 ...

  4. Elasticsearch GC 时间过长的解决方法

    前言:GC 时间过长是个常见的问题,下文我将对应的现象和解决方案进行阐述.为什么这么解决,可以参考我的另外一个博客中的内存使用和GC指标这个章节 我们有时会发现elasticsearch集群挂掉,或者 ...

  5. CRT&EXCRT 中国剩余定理及其扩展

    前言: 中国剩余定理又名孙子定理.因孙子二字歧义,常以段子形式广泛流传. 中国剩余定理并不是很好理解,我也理解了很多次. CRT 中国剩余定理 中国剩余定理,就是一个解同余方程组的算法. 求满足n个条 ...

  6. 【POJ1015】Jury compromise 多个费用的背包

    这是一道比较综合的动态规划问题. 首先,根据题目中的从N个人中选出M个人,并且要使得某个目标函数最优,可以想到是背包问题,且因为要取出M个人,人数也应该作为背包体积的一个维度. 其次,要求输出路径,因 ...

  7. (转)Maven仓库——私服介绍

    背景:对Maven私服一直想做个深入的总结,因为不了解,所以感觉很陌生. 转载地址:http://blog.csdn.net/catoop/article/details/62312477 常用功能和 ...

  8. zoj3956(Course Selection System)_Solution

    zoj3956_Solution H=sum(hi),C=sum(ci),Value=H*H-H*C-C*C 求Value的最大值 Solution: 动态规划: 共两维:H,C           ...

  9. 外显子分析弹错解决方案:Invalid command line: Cannot process the provided BAM/CRAM file(s) because they were not indexed.

    出现这种问题说明bam/cram文件没有进行index. Samtool能解决这个问题,以bam文件为例,输入以下命令行即可解决问题: /path/to/your/samtools index fil ...

  10. vs widows服务的发布

    1.在service1.cs里空白处点击右键,弹出菜单选择 添加安装程序 2.自动生成ProjectInstaller.cs文件后 可在InitializeComponent()方法里自定义服务名称 ...