概述
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：
首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，http://a.com 域名下的js无法操作http://b.com或是http://c.a.com域名下的对象。更详细的说明可以看下表：
对于主域相同子域不同的通信方法这里不一一列举了，这里主要讲解一下跨主域的通信问题。
postMessage方法
window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的 document.domain 的值相同）。 在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。
兼容性
http://caniuse.com/#search=postMessage
具体用法
发送消息：destination.postMessage(message, targetOrigin);
destination: 目标窗口
message:发送的消息
targetOrigin: 定义发送消息的范围
监听接受消息：window.addEventListener(‘message’,callback,false);
已知问题
部分版本IE8/9浏览器只支持iframe通信，不支持tabs之间通信。
IE8/9不能传输对象，只能传输string。
参考资料
mozlia官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage
IE官方文档:https://status.modern.ie/postmessage
webplatform文档:https://docs.webplatform.org/wiki/apis/web-messaging/MessagePort/postMessage
HTML5官方文档:https://html.spec.whatwg.org/multipage/comms.html#web-messaging
window.navigator(适用于ie6/7)
ie6/7有个漏洞,父窗口与所有的iframe共享window.navigator对象，可以利用这个漏洞，由于ie6/7不支持postMessage,所以可以利用这个漏洞对ie6/7做兼容跨域通信支持。
具体用法
途中A过程和B过程都是初始化监听事件，类似于onmessage事件。只不过实现方法不一样而已。
按执行顺序来描述的话，如下：
B: 父窗口向window.navigator添加一个监听函数，并打上父窗口的戳。
A: 子窗口向window.navigator添加一个监听函数，并打上子窗口的戳。
C: 父窗口执行post的时候，调用原先子窗口添加在navigator里的监听函数，并将要传输的数据作为函数参数传入。
D: 子窗口执行post的时候，调用原先父窗口添加在navigator里的监听函数，并将要传输的数据作为函数参数传入。
注意：子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多：
document.domain+iframe的设置，应用于主域相同而子域不同；
利用iframe和location.hash，数据直接暴露在了url中，数据容量和类型都有限
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 方法创建的窗口
参数说明：
message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)
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 对象，有三个常用属性：
data: 消息
origin: 消息来源地址
source: 源 DOMWindow 对象
看一个简单的来自网上的demo： http://www.css88.com/demo/postmessage/
当然postmessage也有一些不足的地方：
ie8，ie9下传递的数据类型值支持字符串类型，不过可以使用用 JSON对象和字符串之间的相互转换 来解决这个问题；
ie6，ie7需要写兼容方案，个人认为window.name比较靠谱；
参考网址：
http://www.planeart.cn/?post_type=post&p=1620
数据发送端
首先我们要做的是创建通信发起端，也就是数据源”source”。作为发起端，我们可以open一个新窗口，或创建一个iframe，往新窗口里发送数据，简单起见，我们每6秒钟发送一次，然后创建消息监听器，从目标窗口监听它反馈的信息。
//弹出一个新窗口 var domain = 'http://scriptandstyle.com'; var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow'); //周期性的发送消息 setInterval(function(){ var message = 'Hello! The time is: ' + (new Date().getTime()); console.log('blog.local: sending message: ' + message); //send the message and target URI myPopup.postMessage(message,domain); },6000); //监听消息反馈 window.addEventListener('message',function(event) { if(event.origin !== 'http://scriptandstyle.com') return; console.log('received response: ',event.data); },false);
这里我使用了window.addEventListener，但在IE里这样是不行的，因为IE使用window.attachEvent。如果你不想判断浏览器的类型，可以使用一些工具库，比如jQuery或Dojo。
假设你的窗口正常的弹出来了，我们发送一条消息——需要指定URI(必要的话需要指定协议、主机、端口号等)，消息接收方必须在这个指定的URI上。如果目标窗口被替换了，消息将不会发出。
我们同时创建了一个事件监听器来接收反馈信息。有一点极其重要，你一定要验证消息的来源的URI！只有在目标方合法的情况才你才能处理它发来的消息。
如果是使用iframe，代码应该这样写：
//捕获iframe var domain = 'http://scriptandstyle.com'; var iframe = document.getElementById('myIFrame').contentWindow; //发送消息 setInterval(function(){ var message = 'Hello! The time is: ' + (new Date().getTime()); console.log('blog.local: sending message: ' + message); //send the message and target URI iframe.postMessage(message,domain); },6000);
确保你使用的是iframe的contentWindow属性，而不是节点对象。
数据接收端
下面我们要开发的是数据接收端的页面。接收方窗口里有一个事件监听器，监听“message”事件，一样，你也需要验证消息来源方的地址。消息可以来自任何地址，要确保处理的消息是来自一个可信的地址。
//响应事件 window.addEventListener('message',function(event) { if(event.origin !== 'http://davidwalsh.name') return; console.log('message received: ' + event.data,event); event.source.postMessage('holla back youngin!',event.origin); },false);
上面的代码片段是往消息源反馈信息，确认消息已经收到。下面是几个比较重要的事件属性：
source – 消息源，消息的发送窗口/iframe。
origin – 消息源的URI(可能包含协议、域名和端口)，用来验证数据源。
data – 发送方发送给接收方的数据。
这三个属性是消息传输中必须用到的数据。
使用window.postMessage
跟其他很web技术一样，如果你不校验数据源的合法性，那使用这种技术将会变得很危险；你的应用的安全需要你对它负责。window.postMessage就像是PHP相对于JavaScript技术。window.postMessage很酷，不是吗？
