XDM

cross-document messaging 类似于XSS的简称,故称为 XDM 而不是 CDM

某些时候 XDM 也能作为跨域的实现手段之一

与Jsonp 和 传统的 CORS 跨域方式不同

XDM通常用于不同域的页面之间传递消息

postMessage

postMessage() 方法作为 XDM 的核心被添加进了 HTML5 规范中

该方法的作用是:向当前页面的iframe或者弹出的窗口传递消息

该方法用于接收以下两个参数:

  1. 消息的内容
  2. 接收消息的域

通过第二个参数可以防止浏览器将信息发送到不安全的地方

使用方法如下:

// 支持XDM的浏览器也支持 iframe 的 contentWindow属性
let iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("这里是消息","http://www.example.com");

上方的postMessage的第二个参数则用于指定接收消息的文档的源域

如果匹配,则将消息传入内嵌框架中,否则什么也不做

当然该参数也可以设置为"*" 表示所有域都可以接受消息

发送消息介绍完了,自然就需要接收传递的信息

当文档接收到 XDM消息时就会触发 window 对象的 message 事件

该事件是以异步形式触发的所以可能存在时延, 触发该事件后,该事件的事件对象(event)会包含以下信息:

  • data: postMessage传入的第一个参数字符串数据
  • origin: 发送消息文档的所在的域
  • source: 发送消息文档的window对象的代理,用于在发送上一条消息的窗口中调用postMessage方法(即发送回执消息)

就像发送时指定消息接收的域一样,收到消息后验证消息的来源域也同样重要,以此保证消息来自已知的域

基本的验证如下:

window.onmessage = function(event){
// 确保消息来源于已知域
if(event.origin == "http://www.example.com"){
// 处理接收的数据
processMessage(evnet.data); // 可选,向来源窗口发送回执
event.source.postMessage("Received","http://example1.com");
}
}

需要注意的是:

evnet.source 大多数情况下只是 window 对象的代理对象,也就是说并不是真正的 window 对象

所以不能通过该代理对象来访问原本 window 对象上的属性和值

XDM的一个怪异之处在于:

postMessage的第一个参数最早是作为永远都是字符串来实现的,但后来允许传入任何数据结构,但是为了保险起见最好还是只传入字符串,如果希望传入json数据最好使用 JSON.stringify() 来处理

圈起来上面的是要考的,在阿里面前端的时候被问到,当时是蒙逼且绝望的emm....

最后就是这种跨域的浏览器兼容情况了,话不多说直接上图,自己感受

XDM-跨文档消息传送的更多相关文章

  1. HTML5 跨文档消息传输

    对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...

  2. HTML5新特性之跨文档消息传输

    1.同域限制 所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法 浏览器限制不同窗口(包括iFrame窗口 ...

  3. HTML(六)HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  4. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

  5. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  6. HTML5跨文档消息传递

    HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web M ...

  7. 跨文档消息传递----postMessage()

    HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...

  8. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  9. Web 通信技术 ——跨文档信息传输(JavaScript)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

随机推荐

  1. 得到Android keystore签名的命令方法

    keytool -list -v -keystore keyfile.jks 上面这个命令是用来得到一些签名字符串,这些字符串用来在各种平台上填资料的 再来个手动签名的命令: jarsigner -v ...

  2. TabLayout:另一种Tab的实现方式

    http://blog.csdn.NET/aigestudio/article/details/47155769 在5.0以前我们想要实现像网易新闻客户端那样的的Tab可以有很多种选择: 比如古老的T ...

  3. Create R NoteBook require updated versions of the following packages : knitr,rmarkdown.

    Create R NoteBook require updated versions of  the following packages : knitr,rmarkdown. 点击yes安装失败的时 ...

  4. MVC-AOP思想-Filter 三种注册方式

    在ASP.NET MVC框架中,为我们提供了四种类型的Filter类型包括:IAuthorizationFilter.IActionFilter.IResultFilter.IExceptionFil ...

  5. JavaScript匿名自执行函数~function(){}

    原博客:https://blog.csdn.net/yaojxing/article/details/72784774 1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: ...

  6. Flux和ExtJS MVC框架的异同点介绍

    Flux是Facebook在现有MVC框架数据流动复杂,难以设计和维护大型的前端应用的情况下设计的一种新的数据架构协议.叫做协议是因为Flux本身就像MVC一样,规定了一种机制,但是Facebook提 ...

  7. QString与string的相互转换

    1.QString转换String string s = qstr.toStdString(); 2.String转换QString QString qstr2 = QString::fromStdS ...

  8. 时间复杂度O(n),空间复杂度O(1)解斐波那契数列

    #include <stdio.h> #include <iostream> using namespace std; long long fibs1(int in_iN) { ...

  9. Java开源生鲜电商平台-财务系统模块的设计与架构(源码可下载)

    Java开源生鲜电商平台-财务系统模块的设计与架构(源码可下载) 前言:任何一个平台也好,系统也好,挣钱养活团队这个是无可厚非的,那么对于一个生鲜B2B平台盈利模式( 查看:http://www.cn ...

  10. Spring Cloud Zuul 限流详解(附源码)(转)

    在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选择,只需要编写一个过滤器就可以了,关键在于如何实现限流的算法. ...