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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jquery 的 $("#id").html() 无内容的解决方法
Jun 07 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
ES6 解构赋值的原理及运用
May 25 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安装为Apache DSO
2006/10/09 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
详解Python编程中包的概念与管理
2015/10/16 Python
python print出共轭复数的方法详解
2019/06/25 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
一套Java笔试题
2016/08/20 面试题
环境工程专业个人求职信
2013/12/05 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
小学教师师德感言
2014/02/10 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
安全教育日主题班会
2015/08/13 职场文书
2016教师节感恩话语
2015/12/09 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers