iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信。
一、同域下父子页面的通信
父页面 parent.html
- <html>
-
<head>
-
<script type="text/javascript">
-
- function say() {
-
alert("parent.html------>I'm at parent.html");
- }
-
- function callChild()
- {
- //document.frames["myFrame"].window.say();//只适用于ie浏览器
- myFrame.window.say();
- myFrame.window.document.getElementById("button").value="我变了";
- }
-
</script>
-
</head>
-
-
<body>
-
<input type=button value="调用child.html中的函数say()" onclick="callChild()">
-
<iframe name="myFrame" src="child.html"></iframe>
-
</body>
-
</html>
子页面 child.html
- <html>
-
<head>
-
<script type="text/javascript">
-
- function say()
- {
-
alert("child.html--->I'm at child.html");
- }
-
- function callParent() {
- parent.say();
- parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
- }
-
</script>
-
</head>
-
<body>
-
<input id="button" type=button value="调用parent.html中的say()函数" onclick="callParent()">
-
</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
其它资料:
jquery 父窗口 子窗口 相关操作
分享到:
相关推荐
本文实例讲述了嵌入式iframe子页面与父页面js通信的方法。分享给大家供大家参考。具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域...
嵌入式框架iframe在网页设计中的应用研究
转 嵌入式转 嵌入式
嵌入式WiFi技术研究与通信设计 嵌入式WiFi技术研究与通信设计
嵌入式MCGS串口通信快速入门及编程实例_第10章_Modbus通信之CRC校验_CRC计算.pdf嵌入式MCGS串口通信快速入门及编程实例_第10章_Modbus通信之CRC校验_CRC计算.pdf嵌入式MCGS串口通信快速入门及编程实例_第10章_Modbus...
设计嵌入式系统实现各种通信方式之间的数据交互。核心模块板采用基于ARM9体系结构的微控制器。硬件电路扩展外围串口、CAN总线接口、以太网口等。为嵌入式Linux操作系统开发扩展的串口驱动程序;应用编程完成多线程...
嵌入式汽车电子LIN总线通信协议LIN2.1协议
嵌入式MCGS串口通信快速入门及编程实例_第9章_万能通信之Modbus_温度测量.pdf嵌入式MCGS串口通信快速入门及编程实例_第9章_万能通信之Modbus_温度测量.pdf嵌入式MCGS串口通信快速入门及编程实例_第9章_万能通信之...
基于嵌入式与单片机的多机通信设计实现
Java在嵌入式通信领域的应用与发展颇具传奇色彩。1991年出现的Oak(Java语言前身)技术,最初的设想是在冰箱、电视等信息家电产品中嵌入可编程通信控制平台,以实现这些设备间 的数据通信。1995年后全球爆发的互联...
嵌入式MCGS串口通信快速入门及编程实例_第1章_MCGS简介.pdf嵌入式MCGS串口通信快速入门及编程实例_第1章_MCGS简介.pdf嵌入式MCGS串口通信快速入门及编程实例_第1章_MCGS简介.pdf嵌入式MCGS串口通信快速入门及编程...
基于OpenSSL的嵌入式网络安全通信设计与实现 基于OpenSSL的嵌入式网络安全通信设计与实现 基于OpenSSL的嵌入式网络安全通信设计与实现 基于OpenSSL的嵌入式网络安全通信设计与实现
嵌入式Linux与网络数据库通信功能的研究和实现.pdf
串口通信程序实例 串口通信程序实例 串口通信程序实例 C语言 linux嵌入式串口通信程序
嵌入式Linux环境下的串口通信研究.pdf
在嵌入式环境下,如何实现蓝牙通信系统软件的设计
无线通信系统ARM嵌入式开发实例精讲.pdf
嵌入式系统与PC机之间的音频通信 嵌入式系统与PC机之间的音频通信嵌入式系统与PC机之间的音频通信嵌入式系统与PC机之间的音频通信