嵌入式iframe子页面与父页面js通信方式
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,且不能用于商业目的。
昵称:






嵌入式iframe子页面与父页面js通信方式的更多相关文章
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- JS中iframe子页面与父页面之间通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getEle ...
- ifream子页面与父页面互调
function a1(x){ alert('父页面:' + x); } function acc(){ var frames = document.getElementById("dial ...
- 关于iframe/子窗体与父窗体的交互
父子窗体交互方式 通过contentWindow交互 通过postMessage交互 通过contentWindow交互 主窗体内嵌的iframe或者是其通过js打开的新窗口都可以通过contentW ...
- html中iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.ge ...
- iframe子页面与父页面元素的访问以及js变量的访问[zhuan]
https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html
- js处理iframe中子页面与父页面里面对象的取得的解决方案
[1]子页面取得父页面的dom对象 parent.window.$('#id').val(""); [2]父页面取得子页面的对象 $(window.frames[&qu ...
- iframe子页面与父页面通信
同域下父子页面的通信 父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset ...
随机推荐
- hive-site.xml
https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...
- 【Java】 异常
异常分类 所有的异常都是由Throwable继承而来,但在下一层理解分解为两个类Error和Exception. Error类层次结构描述了Java运行时系统的内部错误和资源耗尽错误.应用程序不应该跑 ...
- matplotlib之scatter绘制散点
# 使用matplotlib.pyplot.scatter绘制散点 import matplotlib.pyplot as plt from pylab import mpl # 设置默认字体,解决中 ...
- Elasticsearch GC 时间过长的解决方法
前言:GC 时间过长是个常见的问题,下文我将对应的现象和解决方案进行阐述.为什么这么解决,可以参考我的另外一个博客中的内存使用和GC指标这个章节 我们有时会发现elasticsearch集群挂掉,或者 ...
- CRT&EXCRT 中国剩余定理及其扩展
前言: 中国剩余定理又名孙子定理.因孙子二字歧义,常以段子形式广泛流传. 中国剩余定理并不是很好理解,我也理解了很多次. CRT 中国剩余定理 中国剩余定理,就是一个解同余方程组的算法. 求满足n个条 ...
- 【POJ1015】Jury compromise 多个费用的背包
这是一道比较综合的动态规划问题. 首先,根据题目中的从N个人中选出M个人,并且要使得某个目标函数最优,可以想到是背包问题,且因为要取出M个人,人数也应该作为背包体积的一个维度. 其次,要求输出路径,因 ...
- (转)Maven仓库——私服介绍
背景:对Maven私服一直想做个深入的总结,因为不了解,所以感觉很陌生. 转载地址:http://blog.csdn.net/catoop/article/details/62312477 常用功能和 ...
- zoj3956(Course Selection System)_Solution
zoj3956_Solution H=sum(hi),C=sum(ci),Value=H*H-H*C-C*C 求Value的最大值 Solution: 动态规划: 共两维:H,C ...
- 外显子分析弹错解决方案: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 ...
- vs widows服务的发布
1.在service1.cs里空白处点击右键,弹出菜单选择 添加安装程序 2.自动生成ProjectInstaller.cs文件后 可在InitializeComponent()方法里自定义服务名称 ...