JavaScript使用HTML5的window.postMessage实现跨域通信例子


Posted in Javascript onApril 11, 2014

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:
1.document.domain+iframe的设置,应用于主域相同而子域不同;
2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限
3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要

在同一客户端就行,跨应用程序, 可以跨域。
window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。
各种方案网上都有很多实例代码,大家可以自己搜索一下。

html5中最炫酷的API之一:就是 跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome,Firefox , Opera 和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

发送消息的”postMessage”方法

向外界窗口发送消息:

otherWindow.postMessage(message, targetOrigin);

otherWindow: 指目标窗口,也就是给哪个window发消息,是 window.frames 属性的成员或者由 window.open 方法创建的窗口
参数说明:
1.message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
2.targetOrigin: 是限定消息接收范围,不限制请使用 ‘*'

接受信息的”message”事件

var onmessage = function (event) { 
var data = event.data; 
var origin = event.origin; 
//do someing 
}; 
if (typeof window.addEventListener != 'undefined') { 
window.addEventListener('message', onmessage, false); 
} else if (typeof window.attachEvent != 'undefined') { 
//for ie 
window.attachEvent('onmessage', onmessage); 
}

回调函数第一个参数接收 Event 对象,有三个常用属性:
1.data: 消息
2.origin: 消息来源地址
3.source: 源 DOMWindow 对象

当然postmessage也有一些不足的地方:
1.ie8,ie9下传递的数据类型值支持字符串类型,不过可以使用用 JSON对象和字符串之间的相互转换 来解决这个问题;
2.ie6,ie7需要写兼容方案,个人认为window.name比较靠谱;

Javascript 相关文章推荐
js跳转页面方法实现汇总
Feb 11 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 #Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 #Javascript
js获取视频时长代码
Apr 10 #Javascript
js转化毫秒为时间格式代码
Apr 10 #Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 #Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 #Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 #Javascript
You might like
php&java(三)
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
php实现购物车功能(上)
2020/07/23 PHP
php精度计算的问题解析
2019/06/21 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
jQuery实现简单轮播图效果
2020/12/27 jQuery
python检测lvs real server状态
2014/01/22 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python运算符+与+=的方法实例
2021/02/18 Python
Python的两道面试题
2013/06/29 面试题
高校十八大报告感想
2014/01/27 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015毕业寄语大全
2015/02/26 职场文书
员工试用期工作总结
2019/06/20 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书