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技巧收藏
Apr 07 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python中Qslider控件实操详解
2021/02/20 Python
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
施工安全责任书
2014/04/14 职场文书
淘宝好评语大全
2014/05/05 职场文书
商场促销活动策划方案
2014/08/18 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
意向协议书
2015/01/27 职场文书
汽车转让协议书
2015/01/29 职场文书
员工辞退通知书
2015/04/17 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
create-react-app开发常用配置教程
2022/06/25 Javascript