一、背景

在這個Web頁面越來越豐富的時代，頁面通過iframe嵌入其他的頁面也越來越常見。但由於瀏覽器同源策略的限制，不同域之間屬性和操作是無法直接互動的，所以在這個時候，開發者多多少少需要一些方案來突破這些限制。跨域問題涉及的地方也很多，如文件之間的訊息通訊、ajax請求、Cookie等，本文討論的是iframe和父頁面的訊息通訊。

二、現狀

目前網上也可以找到各種解決方案（少說都有10+個，有興趣的話可以去看看），對於現代瀏覽器來說，原生的postMessage API一定是不二的選擇，所以各種方案的不同點均在於IE 6、7中的處理（不用相容IE6、7的同志可以去看其他文章了）。當然這麼多方案有各種優缺點，甚至有些只支援單向跨域，個人覺得實際意義不大。另外一些方案需要proxy.html這樣的代理頁面做中轉，但是涉及伺服器上的部署，並且對於多方合作來說還是有些麻煩。

三、思路

雖然不再複述現有的各種方案，但還是想交待一點上下文。相信網上看到最多方案就是利用location.hash或是window.name進行iframe的跨域通訊：

• location.hash會直接暴露在URL裡，並且在一些瀏覽器裡會產生歷史記錄，資料安全性不高也影響使用者體驗，所以不做考慮。另外由於URL大小的限制，支援傳遞的資料量也不大。
• window.name相比來講就好很多了，支援2M的資料量，並且當iframe的頁面跳到其他地址時，其window.name值保持不變，副作用可以說是最小的。

講到這思路也比較清晰了，咱們就用window.name唄，但問題又來了：只有兩個頁面同域時才能訪問window.name。這個問題還好，只要把iframe改為與父頁面同域就可以了。這又衍生了新的問題：這不是意味著只能單向通訊了嗎，iframe怎麼向父頁面發訊息（不可能去改父頁面的location吧）？在暗罵坑爹的同時偶然發現了一個很神奇的方法，就是想訪問一個iframe的window.name時，只要將其location改為‘about:blank’即可，屢試不爽~沒錯這個“特性”可以視為IE6/7的一項安全性問題，但利用這個特性來進行跨域通訊並沒有實際的安全風險。

具體的實現見下圖，在iframe的內部再建立一個iframe（我們稱之為信使），父子頁面輪詢信使的window.name，父子頁面各自使用變數儲存window.name，輪詢時發現有變化即被視為收到訊息。基本原理就是這麼簡單，我們繼續..

圖1

作為一個通用的解決方案，我們的目標是提供一個js檔案，封裝通訊的介面，需要通訊的頁面只要載入js檔案就行。但在封裝前，需要考慮更復雜一點的情況：當父子頁面雙方頻率較高地雙向通訊時，如何進行支援？按照上述的方案，信使的window.name並沒有讀寫鎖的概念，這意味著訊息很容易亂掉或被漏掉。所以更好的方案應該是：建立兩個信使，分別負責”父–>子”和”子–>父”的訊息傳遞，並且為了防止訊息被沖掉，傳送訊息時會維護一個訊息佇列，在取訊息時處理訊息佇列裡的所有訊息。見圖2。

圖2

四、封裝

最後的封裝就是加入了postMessage API的檢測，另外也要判斷是否為跨域，這樣就滿足了所有iframe通訊的情況了。這裡實現的信使只負責訊息的監聽和傳送，所以在使用上是非常簡單的：

具體使用可以參考下方的demo : )

五、總結

雖然國內也有人提過使用”about:blank”進行iframe通訊的，但是程式碼的封裝和可讀性都不是太好，本方案是一日本人所提出，我覺得處理的很好，所以就拿出來和大家分享下。雖然嘗試過優化輪詢那一塊，但暫時無果，有興趣的朋友可以一起研究下~

DEMO：點選這裡