使用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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
js实现拖拽元素选择和删除
Aug 25 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
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
中软Java笔试题
2012/11/11 面试题
Java面试题汇总
2015/12/06 面试题
副科级后备干部考察材料
2014/05/15 职场文书
技术员岗位职责
2015/02/04 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL