使用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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
几种响应式文字详解
May 19 Javascript
微信小程序如何获取用户收货地址
Nov 27 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php给图片加文字水印
2015/07/31 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python 性能提升的几种方法
2016/07/15 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
初中同学聚会感言
2014/02/11 职场文书
2014年行政工作总结
2014/11/19 职场文书
初三英语教学反思
2016/02/15 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP