iframe子页面与父页面在同域或不同域下的js通信


Posted in Javascript onMay 07, 2014

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。

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

父页面parent.html

<html> 
<head> 
<script type="text/javascript"> 
function say(){ 
alert("parent.html"); 
} 
function callChild(){ 
myFrame.window.say(); 
myFrame.window.document.getElementById("button").value="调用结束"; 
} 
</script> 
</head> 
<body> 
<input id="button" 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"); 
} 
function callParent(){ 
parent.say(); 
parent.window.document.getElementById("button").value="调用结束"; 
} 
</script> 
</head> 
<body> 
<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/> 
</body> 
</html>

方法调用

父页面调用子页面方法:FrameName.window.childMethod();

子页面调用父页面方法:parent.window.parentMethod();
DOM元素访问

获取到页面的window.document对象后,即可访问DOM元素
注意事项

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

二、跨域父子页面通信方法

如果iframe所链接的是外部页面,因为安全机制就不能使用同域名下的通信方式了。
父页面向子页面传递数据

实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:

1. 在子页面中通过setInterval方法设置定时器,监听location.href的变化即可获得上面的data信息

2. 然后子页面根据这个data信息进行相应的逻辑处理

子页面向父页面传递数据

实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
js确定对象类型方法
Mar 30 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 #Javascript
jquery删除数据记录时的弹出提示效果
May 06 #Javascript
js单词形式的运算符
May 06 #Javascript
js函数调用的方式
May 06 #Javascript
js使用ajax读博客rss示例
May 06 #Javascript
Android中的jQuery:AQuery简介
May 06 #Javascript
JavaScript获取table中某一列的值的方法
May 06 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python re模块的高级用法详解
2018/06/06 Python
Python中交换两个元素的实现方法
2018/06/29 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
上海某公司.net方向笔试题
2014/09/14 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
法定代表人授权委托书范文
2014/09/22 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python