跨文档传输消息(XDM)也就是跨域传递消息，是实现跨域的另一种方法（突然想到我的跨域系列文章好像少写了一篇）。
XDM的核心就是浏览器的postMessage()方法，这个方法看起来好熟悉，在web worker里也有用到，都是用来向另一个地方传递数据。在XDM中，“另一个地方”就是指包含在当前页面的iframe元素，或者由当前页面弹出的窗口。
在还没深入了解这前，看到这里我的心里就会有个疑问。
postMessage()方法只能与内嵌框架通信吗，为什么？
postMessage()方法就是用来与不同域之间的窗口进行通信的API，之所以只能与内嵌框架或在当前页面的弹出窗口进行通信，是因为要使用postMessage()的前提就是要获得接收页面所在的窗口对象，在该对象上调用postMessage方法。
说到这里又想提一下同源策略参考文章 同源策略时维护浏览器安全的必要限制，他规定我们不能对不同源文档或脚本进行读操作。
那为什么script，img， iframe标签就不受同源策略的限制呢。对于这个问题，我们可以这样理解，通过src引入的资源，是由网站编写人员决定的，他不会允许网站引入一些恶意资源，所以我们默认他是安全的。我们关注的是加载脚本的页面是否和当前窗口同源，而不是脚本来自那个源。
下面进入正题。。
使用详情
需要特别注意的是：
我们可以指定消息要发往那个域，也可以设置为*，即所有监听了message事件的域都可接收，但是我们不建议这么作，尤其是你在传递私密的信息。接收消息的页面应该做好消息来源的检测，只接收特定来源的消息。首先我们修改hosts文件模拟跨域
127.0.0.1 localhost 127.0.0.1 www.myapp.com 127.0.0.1 www.otherapp.com <!--"http://www.myapp.com:3000/window2.html"--> <body> <button id="btn">发送</button> <iframe src="http://www.otherapp.com:3000/window2.html"></iframe> <script> var btn=document.getElementById("btn"); btn.onclick=function () { window.frames[0].postMessage("hello window2!","http://www.otherapp.com:3000/window2.html"); }; window.addEventListener("message",function (e) { alert(e.data); },false) </script> </body> <!--"http://www.otherapp.com:3000/window2.html"--> <body> <script> var result=document.getElementById('result'); window.addEventListener("message",function (e) { alert(e.data); e.source.postMessage("hi window1",e.origin); },false) </script> </body>然后我们可以看到：
代码地址：https://github.com/zjjxj/XDM-demo
