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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
修改npm全局安装模式的路径方法
2018/05/15 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
python缩进区别分析
2014/02/15 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python元组知识点总结
2019/02/18 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
病媒生物防治方案
2014/05/13 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
python 中的jieba分词库
2021/11/23 Python