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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JavaScript日历实现代码
Sep 12 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP 8新特性简介
2020/08/18 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
微信小程序form表单组件示例代码
2018/07/15 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python仿抖音表白神器
2019/04/08 Python
Django框架反向解析操作详解
2019/11/28 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
初三政治教学反思
2014/01/30 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
个人务虚会发言材料
2014/10/20 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书