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 相关文章推荐
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
原生js实现轮播图特效
May 04 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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
自动分页的不完整解决方案
2007/01/12 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript中的类继承
2010/11/25 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
windows支持哪个版本的python
2020/07/03 Python
python wsgiref源码解析
2021/02/06 Python
卫校护理专业毕业生求职信
2013/11/26 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
公休请假条
2014/04/11 职场文书
租房协议书范例
2014/10/14 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
教你如何用cmd快速登录服务器
2022/06/10 Servers
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python