使用 <Iframe>實作跨域通信

什麼是iframe

iframe就是我們常用的iframe标簽：<iframe>。iframe标簽是架構的一種形式，也比較常用到，iframe一般用來包含别的頁面，例如我們可以在我們自己的網站頁面加載别人網站或者本站其他頁面的内容。

iframe的用法有很多，接下來說一下iframe的其中一個比較實用的用法----跨域通信

假設現在有兩個系統A,B：A系統的某個頁面有一部分顯示的内容是B系統的，怎麼辦？

<div class="modal-body" id="housekeeperBody">

<iframe src="http://erp.young51.com/user/indexIframe.action"  name="OpenartDialog14577934462321"  frameborder="0" allowtransparency="true" style="width: 900px; height: 565px; border: 0px none;">

//這裡就是你要加載的頁面

</iframe>

</div>

這裡iframe的核心屬性就是“src”它表示你要引用的頁面一個請求（這裡的src實際就是對B系統的一個請求，B将傳回你一個HTML，如果B系統是另外一個負責的，那麼關于這個請求的另一端你就不必關心了）。和其他html标簽一樣，它也有一些其他的屬性，如該列的name，height，style等等

讀到這裡會遇到一個問題 

JavaScript出于安全方面的考慮，不允許跨域調用其他頁面的對象。但在安全限制的同時也給注入iframe或是ajax應用上帶來了不少麻煩。這裡把涉及到跨域的一些問題簡單地整理一下：

首先什麼是跨域，簡單地了解就是因為JavaScript同源政策的限制，a.com 域名下的js無法操作b.com或是c.a.com域名下的對象。更詳細的說明可以看下表：

URL        

說明

是否允許通信

http://www.a.com/a.js

http://www.a.com/b.js

同一域名下

允許

http://www.a.com/lab/a.js

http://www.a.com/script/b.js

同一域名下不同檔案夾

http://www.a.com:8000/a.js

同一域名，不同端口

不允許

https://www.a.com/b.js

同一域名，不同協定

http://70.32.92.74/b.js

域名和域名對應ip

http://script.a.com/b.js

主域相同，子域不同

http://a.com/b.js

同一域名，不同二級域名（同上）

不允許（cookie這種情況下也不允許通路）

http://www.cnblogs.com/a.js

不同域名

第一，如果是協定和端口造成的跨域問題“前台”是無能為力的，

第二：在跨域問題上，域僅僅是通過“URL的首部”來識别而不會去嘗試判斷相同的ip位址對應着兩個域或兩個域是否在同一個ip上。

“URL的首部”指window.location.protocol +window.location.host，也可以了解為“Domains, protocols and ports must match”。

我的解決方案是：document.domain+iframe的設定

對于主域相同而子域不同的例子，可以通過設定document.domain的辦法來解決。具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個檔案中分别加上document.domain = ‘a.com’；然後通過a.html檔案中建立一個iframe，去控制iframe的contentDocument，這樣兩個js檔案之間就可以“互動”了。

本文轉自 xinsir999 51CTO部落格，原文連結：http://blog.51cto.com/xinsir/1858731，如需轉載請自行聯系原作者