发送消息
通过调用目标页面window对象中的postMessage()函数可发送消息，代码如下：
JavaScript Code复制内容到剪贴板
window.postMessage("Hello, world", "porta");
第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentWindow中调用postMessage，代码如下：
JavaScript Code复制内容到剪贴板
document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "cha");
监听消息事件
接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。
JavaScript Code复制内容到剪贴板
window.postMessage("Hello, world", "porta");
消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源。
源由规则（scheme）、主机（host）、端口（port）组成。
例如：由于规则不同（如https与http），所以页面与页面的源是不同的。
源的概念中不考虑路径。如：与只是路径不同，他们是相同的源。
源在API和协议中以字符串的形式出现。
JavaScript Code复制内容到剪贴板
var originWhiteList = ["porta", "game", ""]; function checkWhiteList(origin) { for (var i=0; i<originWhiteList.length; i++) { if (origin === originWhiteList[i]) { return true; } } return false; } function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e.data); } else { //忽略来自未知源的消息 } }
postMessage API可以适用于同源和非同源通信，鉴于它的一致性，在同源文档间通信时也推荐适用postMessage。
2 XMLHttpRequest Level2
作为XMLHttpRequest的改进版，XMLHttpRequest Level2在功能上有了很大的改进。主要集中在两个方面：
（1）跨源XMLHttpRequests;
（2）进度事件（Progress events）
2.1 跨源XMLHttpRequst
XMLHttpRequestLevel2通过CORS（Cross Origin Resource Sharing，跨源资源共享）实现了跨源XMLHttpRequests。
跨源HTTP请求包括一个Origin头部，拓为服务器提供HTTP请求的源信息。头部由浏览器保护，不能被应用程序代码修改。从本质上讲，它与跨文档消息通信中消息事件的origin属性作用相同。
CORS规范要求，对一些敏感行为——如申请证书的请求或除了GET和POST以外的OPTIONS预检（preflight）请求，必须由浏览器发送给服务器，以确定这种行为能否被支持和允许，这意味着成功通信的背后或许需要由具备CORS出了能力的服务器来支持。
