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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
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页面中文乱码分析
2013/10/29 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
Vuex的初探与实战小结
2018/11/26 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
浅析Python四种数据类型
2018/09/26 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python time()的实例用法
2020/11/03 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
教师实习自我鉴定
2013/12/11 职场文书
车间班组长的职责
2013/12/13 职场文书
护理职业生涯规划书
2014/01/24 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
医院信息公开实施方案
2014/05/09 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
买房协议书范本
2014/10/23 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
十二生肖观后感
2015/06/12 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
vscode内网访问服务器的方法
2022/06/28 Servers