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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 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 使用redis简单示例分享
2015/03/05 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
python 文件与目录操作
2008/12/24 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
教师党员思想汇报
2014/01/06 职场文书
给女儿的表扬信
2014/01/18 职场文书
休学证明范本
2015/06/19 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
Go 中的空白标识符下划线
2022/03/25 Golang