使用postMesssage()实现iframe跨域页面间的信息传递


Posted in Javascript onMarch 29, 2016

由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现:

1. 子页面url传参

简单说来就是把所有需要传递的参数加到与主页面同源的url上,将子页面重定向到该url,然后主页面通过iframe的src获取这些参数

过程非常复杂,不建议使用这种方法

2. postMessage()

postMesssage()是HTML5提供的一个基于事件的消息传输API,可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

发送消息(子页面)

function sendMessage(param) {
var url;
if (param.url) {
url = param.url;
};
var dataJson = JSON.stringify({
 type:1,

a: param.c, b: param.c,
c: param.c,
url: url
});
window.parent.postMessage(dataJson, '*');
}

由于部分浏览器只能处理字符串参数,我们需要先使用JSON.stringfy()将参数转换为字符串,然后再接收页面使用JSON.parse()转换回对象。

接收消息

对于子页面传递过来的参数,我们可以通过监听window的message事件来获取:

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
case 1:
alert(data.a);break;
}
}, false);

message事件有几个重要属性

1.data:顾名思义,是传递来的message

2.source:发送消息的窗口对象

3.origin:发送消息窗口的源(协议+主机+端口号)

通过postMesssage()方法和message事件就可以实现跨域传递消息了,需要注意的是,在demo中我们是通过子页面向父页面传递消息,所以使用的是window.parent发送,window接收:

window.parent.postMessage(dataJson, '*');

如果是从主页面向子页面就需要对换,使用window发送,window.frames[0]来接收了。

以上内容是小编给大家介绍的使用postMesssage()实现iframe跨域页面间的信息传递,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
JavaScript面向对象程序设计教程
Mar 29 #Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 #Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 #Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
You might like
调频问题解答
2021/03/01 无线电
Function eregi is deprecated (解决方法)
2013/06/21 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python中的句柄操作的方法示例
2019/06/20 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
团员的自我评价
2013/12/01 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
小学教师培训感言
2014/02/11 职场文书
廉洁校园实施方案
2014/05/25 职场文书
妈妈活动方案
2014/08/15 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
教师旷工检讨书
2015/08/15 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书