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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
Angular2数据绑定详解
Apr 18 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
使用vue构建多页面应用的示例
Oct 22 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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
php常用的工具开发整理
2019/09/26 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
为什么python比较流行
2020/06/19 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
大学生自我鉴定
2013/12/08 职场文书
党员实事承诺书
2014/03/26 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript