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 相关文章推荐
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
js点击选择文本的方法
Feb 09 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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
自己动手做一个SQL解释器
2006/10/09 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
python函数局部变量用法实例分析
2015/08/04 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
学习党章思想汇报
2014/01/07 职场文书
学生鉴定评语大全
2014/05/05 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL