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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
Javascript中的delete介绍
2012/09/02 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
基于js文件加载优化(详解)
2018/01/03 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
旅游管理专业个人求职信范文
2013/12/24 职场文书
安全资金保障制度
2014/01/23 职场文书
财务人员岗位职责
2015/02/03 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
如何利用python实现Simhash算法
2022/06/28 Python