HTML5之window.postMessage API

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:

  • document.domain+iframe的设置,应用于主域相同而子域不同;
  • 利用iframelocation.hash,数据直接暴露在了url中,数据容量和类型都有限
  • Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域。
  • window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。

window postMessage允许两个窗口 帧之间跨域发送数据消息。从本质上讲,window postMessage是一个跨域的无服务器垫片的Ajax。让我们一起来看看window postMess

  跨文档消息传输Cross Document Messaging 。高级浏览器Internet Explorer 8+, chromeFirefox , Opera  和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

发送消息的”postMessage”方法

向外界窗口发送消息:

// otherWindow: 指目标窗口,也就是给哪个window发消息,是 window.frames 属性的成员或者由 window.open 方法创建的窗口
otherWindow.postMessage(message, targetOrigin);

参数说明:

  • message:   是要发送的消息,类型为 String、Object (IE8、9 不支持)
  • targetOrigin:   是限定消息接收范围,不限制请使用 ‘*’

接受信息的”message”事件

var onmessage = function (event) {
  var data = event.data;
  var origin = event.origin;
  //TODO
};
if (window.addEventListener) {
  window.addEventListener(‘message‘, onmessage, false);
} else if (window.attachEvent) {
  //For IE
  window.attachEvent(‘onmessage‘, onmessage);
}

回调函数第一个参数接收 Event 对象,有三个常用属性:

  • data:   消息
  • origin:   消息来源地址
  • source:   源 DOMWindow 对象
时间: 2024-11-13 14:36:59

HTML5之window.postMessage API的相关文章

[HTML5_WebWorkers]利用HTML5的window.postMessage实现跨域通信

由于同源策略的限制,JavaScript跨域的问题,一直是一个颇为棘手的问题,为了解决js的跨域,web开发人员是煞费苦心,研究了各种跨域方案,如果有机会的话,明河以后会一一展示给各位,今天明河重点介绍下html5新引入的postMessage跨域方案. 1.哪些场景要考虑跨域问题? 明河这二周在处理淘宝添加收藏夹的重构,里面就有一个非常经典的跨域问题.添加收藏弹出层外层是淘宝商城页面域名是tmall.com,而弹出层内部的页面域名却是taobao.com,接下来的问题就是我现在希望弹出层内部的

HTML5中window.postMessage,在两个页面之间的数据传递

HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功能,但是支持IE8+,假如你的网站不需要支持IE6和IE7,那么可以使用window.postMessage.关于window.postMessage,很多朋友说他可以支持跨域,不错,window.postMessage是客户端和客户端直接的数据传递,既可以跨域传递,也可以同域传递. 应用场景 我只

HTML5:使用postMessage实现Ajax跨域请求

HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. 这里不细说这几种方法,记录的是HTML5的window.postMessage.postMessage兼容IE8+.Firefox.Opera.Saf

js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源.这种安全限制称为同源策略. ( 现代浏览器在安全性和可用性之间选择了一个平衡点.在遵循同源策略的基础上,选择性地为同源策略"开放了后门". 例如img script style等标签,都允许垮域引用资源.) 下表给出了相对 

window.postMessage解决跨域

一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源.Internet Explorer 8+, chrome,Firefox , Opera和Safari 都支持这个功能. 二.测试步骤 1.创建a.html <!DOCTYPE html> <html lang="en"> <

了解HTML5和“她”的 API (二)

Communication API     Cross Document Messaging (跨文档消息通信) postMessage API   origin security(源安全) chatFrame.contentWindow.postMessage('hello','http://www.a.com/'); window.addEventListener('message',messageHandler,true); function messageHandler(e){ swit

HTML5 调用百度地图API地理定位

<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="ht

HTML5之本地文件系统API - File System API

HTML5之本地文件系统API - File System API 2014-06-03 17:54 19991人阅读 评论(0) 收藏 举报 目录(?)[+] 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等.除了上面我们提到的,还有比较新的特性 - File System API,它能够帮助我们来突破沙箱访问我们本地的文件系统,从而有效的弥补桌面和web应用之间的鸿沟.在今天这篇文章中,我们将会介绍基本的File system

了解HTML5和“她”的 API (三)

Web Workers(后台线程) JavaScript是单线程的,较长的javascript运算会阻塞UI线程. web worker 是运行在后台的 JavaScript,不会影响页面的性能. 在web worker中执行的脚本不能访问 window对象 document对象 parent对象. web worker 一般用于更耗费 CPU 资源的任务. 检测 Web Worker 支持 //检测浏览器是否支持Web Worker if(typeof(Worker) !== "undefin