使用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下通过replace字符串替换实现大小图片切换
May 22 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
python实现连连看辅助(图像识别)
2020/03/25 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python自动下载图片的方法示例
2020/03/25 Python
pycharm的python_stubs问题
2020/04/08 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
医院反腐倡廉演讲稿
2014/09/16 职场文书
个人学习总结范文
2015/02/15 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
python实现双链表
2022/05/25 Python