javascript iframe跨域詳解

1.什麼引起了ajax跨域不能的問題 

ajax本身實際上是透過XMLHttpRequest物件來進行資料的交互，而瀏覽器出於安全考慮，不允許js程式碼進行跨域操作，所以會警告。

2.有什麼完美的解決方案麼？ 

沒有。解決方案有不少，但是只能根據自己的實際情況來選擇。

具體情況有: 

一、本域和子域的相互訪問: www.aa.com和book.aa.com 
二、本域和其他域的相互訪問: www.aa.com和www. bb.com 用iframe 
三、本域和其他域的相互訪問: www.aa.com和www.bb.com 用XMLHttpRequest訪問代理 
四、本域和其他域的相互訪問: www.aa.com和www.bb.com 用JS創建動態腳本

解決方法： 

一、如果想做到數據的交互，那麼www.aa.com和book.aa.com必須由你來開發才可以。可以將book.aa.com用iframe加入到www.aa.com的某個頁面下,在www.aa.com和iframe裡面都加上document.domain = "aa.com"，這樣就可以統一域了，可以實現跨域存取。就和平時同一個域中鑲嵌iframe一樣，直接呼叫裡面的JS就可以了。 （這個辦法我沒有嘗試，不過理論可行）

二、當兩個域不同時,如果想相互調用，那麼同樣需要兩個域都是由你來開發才可以。用iframe可以實現資料的互相呼叫。解決方案就是用window.location物件的hash屬性。 hash屬性就是http://domian/web/a.htm#dshakjdhsjka 裡面的#dshakjdhsjka。利用JS改變hash值網頁不會刷新，可以這樣實現透過JS存取hash值來做到通訊。不過除了IE之外其他大部分瀏覽器只要改變hash就會記錄歷史，你在前進和後退時就需要處理，非常麻煩。不過再做簡單的處理時還是可以用的，具體的程式碼我再下面有下載。大體的過程是頁面a和頁面b在不同域下,b透過iframe加到a裡，a透過JS修改iframe的hash值，b裡面做一個監聽（因為JS只能修改hash，資料是否改變只能由b自己來判斷），偵測到b的hash值被修改了，得到修改的值，經過處理返回a需要的值，再來修改a的hash值（這個地方要注意，如果a 本身是那種查詢頁面的話例如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是無法取得資料的，同樣報沒有權限的錯誤，需要a把這個傳過來，所以也比較麻煩），同樣a裡面也要做監聽，如果hash變化的話就取得返回的數據，再做相應的處理。

三、這種情形是最常遇到的，也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個，也就是另外一個是別人的，人家告訴你你要取得數據就訪問某某連接參數是什麼樣子的，最後返回數據是什麼格式的。而你需要做的就是在你的網域下新建一個網頁，讓伺服器去別人的網站上取得數據，再回傳給你。 domain1下的a向同域下的GetData.aspx請求數據，GetData.aspx向domain2下的ResponseData.aspx發送請求,ResponseData.aspx傳回資料給GetData.aspx, GetData.aspx再傳回給a,這樣就完成了一次資料請求。 GetData.aspx在其中扮演了代理程式的角色。具體可以看​​下我的程式碼。

四、這個和上個的區別就是請求是使用<script>標籤來請求的，這個要求也是兩個域都是由你來開發才行。原理是JS檔案注入，在本域內的a 內產生一個JS標籤，它的SRC指向請求的另外一個域的某個頁面b，b回傳資料即可，可以直接回傳JS的程式碼。因為script的src屬性是可以跨域的。具體看程式碼，這個也比較簡單。 </script>

在父親視窗中取得iframe中的元素

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例：window.frames["ifm"].document.getElementById("btnOk").click();

   

格式：  

var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例：
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();

   

jquery

在父窗口中獲取iframe中的元素

格式：window.parent.document.getElementById("父窗口的元素ID").click();
实例：window.parent.document.getElementById("btnOk").click();

    

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

   

  在iframe中取得父親視窗的元素

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2