由于同源策略的限制，Javascript存在跨域通信的問題，典型的跨域問題有iframe與父級的通信等。常規的幾種解決方法：

(1) document.domain+iframe； (2) 動態創建script； (3) iframe+location.hash； (4) flash。

postMessage是HTML5為解決js跨域問題而引入的新的API，允許多個iframe/window跨域通信。

HTML5中提供了在網頁文檔之間相互接收與發送信息的功能。使用這個功能，只要獲取到網頁所在窗口對象的實例，不僅僅同源(域+端口號)的web網頁之間可以互相通信，甚至可以實現跨域通信。

瀏覽器支持程度：IE8+，firefox4+，chrome8+  opera10+

1. 首先，要想接收從其他的窗口發過來的消息，就必須對窗口對象的message事件進行監聽，如下代碼：

代碼如下:
window.addEventListener(“message”, function(){},false);

2. 其次，需要使用window對象的postMessage方法向其他窗口發送消息，該方法定義如下所示：

代碼如下:
otherWindow.postMessage(message, targetOrigin);

該方法使用2個參數，第一個參數為所發送的消息文本，但也可以是任何javascript對象，第二個參數是接收消息的對象窗口的url地址(比如：http:127.0.0.1:8080/) , 但是我們也可以在url地址字符串中使用通配符”*”, 指定全部的域下，但是我們還是建議使用特定的域名下，otherWindow為要發送窗口對象的引用。

Demo演示：

假如現在我在hosts文件下 ，綁定2 個域名如下：

127.0.0.1       abc.example.com
127.0.0.1        longen.example.com

現在假如在abc.example.com域下有一個abc.html頁面，在longen.example.com域下有def.html頁面，現在我是希望這2個不同域名下的頁面能互相通信，abc.html代碼如下：

<form>    <p>     <label for="message" style="color:red;font-size:24px;">給iframe子窗口發一個信息：</label>     <input type="text" name="message" value="send" id="message" />     <input type="submit" value="submit" id="submit"/>    </p> </form> <h4>目標iframe傳來的信息：</h4> <p id="test">暫無信息</p>  <iframe id="iframe"   src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>

JS代碼如下：

var win = document.getElementById("iframe").contentWindow;document.getElementById("submit").onclick = function(e){  e.preventDefault();  win.postMessage(document.getElementById("message").value,"http://longen.example.com"); } window.addEventListener("message",function(e){   e.preventDefault();   document.getElementById("test").innerHTML = "從" + e.origin + "那里傳過來的消息:/n" + e.data;},false);

Def.html代碼如下：