HTML5新特性之跨文档消息传输
1、同域限制
所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。
2、window.postMessage方法
浏览器限制不同窗口(包括iFrame窗口)之间的通信,除非两个窗口装载的是同一个域名下的网页。window.postMessage方法就是为了解决这个问题而特定的API,可以让不同域名的窗口互相通信。
postMessage方法的格式如下:
targetWindow.postMessage(message, targetURL[, transferObject]);
上面代码的targetWindow是指向目标窗口的变量,message是要发送的消息,targetURL是指定目标窗口的网址,不符合该网址就不发送信息,transferObject则是跟随信息一起发送的Transferable对象。
假定当前网页弹出一个新窗口。
var popup = window.open(...popup details ...);
然后在当前网页上监听message事件。
window.addEventListener('message', receiveMessage, false);functionreceiveMessage(e) {if (e.origin != 'http://example.org') {return;}console.log(e.data); }
上面的代码指定message事件的回调函数是receiveMessage,一旦收到其他窗口发来的信息,receiveMessage函数就会被调用。receiveMessage函数接受一个event事件对象作为参数,该参数里的origin属性表示信息的来源网址,如果该网址不符合要求,就立刻返回。event.data属性则包含了实际发送过来的信息。
event对象的属性除了origin和data,还有一个source属性,指向向当前网页发送信息的窗口对象。
接着,在当前网页上使用postMessage方法对新窗口发送信息。
popup.postMessage('hello world!', 'http://example.org');
上面代码的postMessage方法的第一个参数是实际发送的信息,第二个参数是指定发送对象的域名必须是http://example.org。如果对方窗口不是这个域名,信息不会发送出去。
最后,在popup窗口中部署下面的代码。
//popup 窗口functionreceiveMessage(event) {event.source.postMessage('Nice to see you!', '*'); }window.addEvengtListener('message', receiveMessage, false);
上面代码有几个地方需要注意。首先,receiveMessage函数里面没有过滤信息的来源,任意网址发来的信息都会被处理。其次,postMessage方法中指定的目标窗口的网址是一个星号,表示该信息可以向任意网址发送。通常来说,这两种做法是不推荐的,因为不够安全,可能会被对方过滤掉。
所有浏览器都支持这个方法,但是IE8和IE9只允许postMessage方法与iFrame窗口通信,不能与新窗口通信。IE10允许与新窗口通信,但是只能使用IE特有的MessageChannel对象。
3、参考链接
[1] Mozilla Developer Network, Window.postMessage
[2] Stack Overflow, Is cross-origin postMessage broken in IE10?
[3] ruanyifeng, 同域限制和window.postMessage方法
转载于:https://www.cnblogs.com/jscode/p/3585932.html
HTML5新特性之跨文档消息传输相关推荐
- HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) {//处理程序代码 },false); ...
- JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.w ...
- html5 logo svg,HTML5新特性之用SVG绘制微信logo
html5新特新html5 中的一些有趣的新特性:1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比如 ...
- html做微信logo,HTML5新特性之用SVG绘制微信logo
原标题:HTML5新特性之用SVG绘制微信logo 这篇文章主要介绍了HTML5新特性之用SVG绘制的微信logo的相关资料,需要的朋友可以参考下. HTML5新特新 HTML5中的一些有趣的新特性: ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- 【HTML5新特性】
HTML5新特性 一.语义标签 二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性 三.音频和视频 四.canvas 五.SVG 六.地理位置 七.拖放API 八.web Wor ...
- Html5新特性总览
Html5新特性总览 1.HTML5 新元素 标签 描述 < article> 定义页面独立的内容区域. < aside> 定义页面的侧边栏内容. < bdi> 定 ...
- HTML5新特性(基本)
1.HTML5改进 (1)兼容性 核心理念:保持一切新特性平滑过渡 (2)实用性和用户优先 (3)化繁为简 2.HTML新特性 (1)减少了对外部插件的需求(flash) (2)更优秀的错误处理 (3 ...
- html5画布绘制微信logo,HTML5新特性之用SVG绘制微信logo
HTML5新特新 HTML5 中的一些有趣的新特性: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比 ...
最新文章
- java.lang.RuntimeException: Parcelable encountered IOException writing
- 内存和显存_详谈服务器内存和显存知识
- 【干货】运维需要掌握的 17 个实用技巧
- 快速排序算法 java 实现
- c#中获取控件窗体句柄,获取窗体等的一些操作
- 迁移学习 简而言之_简而言之SPIFFE
- linux账号前有个base,安装 aconda 后Linux的终端界面前部出现(base)字样
- linux下使用fread读socket套接字的注意点
- Codeforces Round #552 (Div. 3)
- 测试方案的设计及模板
- 使用Java打印三角形
- XILINX FPGA最小逻辑单元CLBs, Slices和LUT区别
- 纵横算法之五:想学算法,时间不够怎么办
- Google guava之Multimap简介说明
- 分贝测试软件哪个好 家庭影院,家庭影院隔音怎么做效果最好 这7个解决方案你一定要知道...
- 数据结构:单链表中在P结点前插入S结点
- 5.Abp vNext 地磅无人值守 微信小程序
- java 汽车加油问题_贪心算法 汽车加油问题 | 学步园
- 淘宝上还有卖这种服务的
- 最优投资组合构建问题,Python实现
热门文章
- java 读取txt乱码_java 逐行读取txt文本如何解决中文乱码
- MySQL中锁的必要性_MySQL中的锁之一:锁的必要性及分类
- SeleniumCSS选择器
- 手机怎么安装py thon_Python计数器– Py​​thon集合计数器
- Elasticsearch的javaAPI之facet,count,delete by query
- Mouse Without Border 无法安装问题
- Java基础面试题:常见的异常类有哪些?
- zabbix (二)安装
- 九、Promises
- OpenStack Orchestration service (编排服务Heat)