嵌入式iframe子页面与父页面js通信方式

摘要:
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信。判断Iframe是否加载完毕有两种方法:1.在Iframe上用onload事件;2.用document.readyState=="complete"来判断二、跨域父子页面通信方法如果iframe所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。

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

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

父页面 parent.html

1 <html>
2 <head>
3 <script type="text/javascript">
4 functionsay() {
5 alert("parent.html------>I'm at parent.html");
6 }
7 functioncallChild()
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 functionsay()
5 {
6 alert("child.html--->I'm at child.html");
7 }
8 functioncallParent() {
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子页面与父页面js通信方式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇前端 WebUploader 分块上传UART下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js获取本月,本季度,上个季度,本周,上周的起始和结束时间

1 /* 获得某月的天数 */ 2 function getMonthDays(myMonth) { 3 var nowYear = new Date().getFullYear(); //当前年 4 var monthStartDate = new Date(nowYear, myMonth, 1)...

Django:使用模态框新增数据,成功后提示“提交成功”,并刷新表格bootstrap-table数据

废话不说先看图:    代码实现:   前台代码: {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>项目...

Failed to mount component: template or render function not defined.

在公司下班前提交的代码,夜晚回家pull一把,运行却报错: Failed to mount component: template or render function not defined. 百度翻译:无法安装组件:模板或渲染功能未定义。 什么原因呢?百度了一大圈,有的说需要修改配置文件,有的说需要回退vue-loader版本。。。。。 但是都试了个遍...

Android使用NFC模拟M卡实现 (二)

  Android使用NFC模拟M卡实现 (一)Android使用NFC模拟M卡实现 (二)Android使用NFC模拟M卡实现 (三)   前几天写的第一篇关于NFC的官方文档的翻译,今天才更新第二篇。没等我更新,就有人留言,具体怎么实现了! 我写文章不易,你搜索也不易,进行了,就请细看,细读。不会让你失望,失望没懂的地方,请留言 ! 这里应该是写总结,...

WPF Button添加图片

0、更改模板 效果: 代码: <Button x:Name="m_HelpButton"IsEnabled="True"Width="23"Height="23"Click="m_HelpButton_Click"> <Button.Template> <...

同步加载、异步加载、延迟加载

同步加载、异步加载、延迟加载 一、同步加载  平常默认用的都是同步加载。如:<script src="http://t.zoukankan.com/http://yourdomain.com/script.js"></script>   同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染。流览...