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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
JS与C#编码解码
Dec 03 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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
php 生成文字png图片的代码
2011/04/17 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
浅谈node的事件机制
2017/10/09 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python读写配置文件的方法
2015/06/03 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python中的for循环
2018/09/28 Python
Python递归函数实例讲解
2019/02/27 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python入门之井字棋小游戏
2020/03/05 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
高三英语教学反思
2014/01/13 职场文书
敬老院标语
2014/06/27 职场文书
2014年科协工作总结
2014/12/09 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
爱国电影观后感
2015/06/19 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
一起来学习Python的元组和列表
2022/03/13 Python