javascript iframe跨域詳解
1.什么引起了ajax跨域不能的問題
ajax本身實際上是通過XMLHttpRequest對象來進行數(shù)據(jù)的交互,而瀏覽器出于安全考慮,不允許js代碼進行跨域操作,所以會警告。
2.有什么完美的解決方案么?
沒有。解決方案有不少,但是只能是根據(jù)自己的實際情況來選擇。
具體情況有:
一、本域和子域的相互訪問: 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創(chuàng)建動態(tài)腳本
解決方法:
一、如果想做到數(shù)據(jù)的交互,那么www.aa.com和book.aa.com必須由你來開發(fā)才可以??梢詫ook.aa.com用iframe添加到 www.aa.com的某個頁面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",這樣就可以統(tǒng)一域了,可以實現(xiàn)跨域訪問。就和平時同一個域中鑲嵌iframe一樣,直接調(diào)用里面的JS就可以了。(這個辦法我沒有嘗試,不過理論可行)
二、當兩個域不同時,如果想相互調(diào)用,那么同樣需要兩個域都是由你來開發(fā)才可以。用iframe可以實現(xiàn)數(shù)據(jù)的互相調(diào)用。解決方案就是用window.location對象的hash屬性。hash屬性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改變hash值網(wǎng)頁不會刷新,可以這樣實現(xiàn)通過JS訪問hash值來做到通信。不過除了IE之外其他大部分瀏覽器只要改變hash就會記錄歷史,你在前進和后退時就需要處理,非常麻煩。不過再做簡單的處理時還是可以用的,具體的代碼我再下面有下載。大體的過程是頁面a和頁面b在不同域下,b通過iframe添加到a里,a通過JS修改iframe的hash值,b里面做一個監(jiān)聽(因為JS只能修改hash,數(shù)據(jù)是否改變只能由b自己來判斷),檢測到b的hash值被修改了,得到修改的值,經(jīng)過處理返回a需要的值,再來修改a的hash值(這個地方要注意,如果a 本身是那種查詢頁面的話比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是無法取得數(shù)據(jù)的,同樣報沒有權限的錯誤,需要a把這個傳過來,所以也比較麻煩),同樣a里面也要做監(jiān)聽,如果hash變化的話就取得返回的數(shù)據(jù),再做相應的處理。
三、這種情形是最經(jīng)常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個,也就是另外一個是別人的,人家告訴你你要取得數(shù)據(jù)就訪問某某連接參數(shù)是什么樣子的,最后返回數(shù)據(jù)是什么格式的。而你需要做的就是在你的域下新建一個網(wǎng)頁,讓服務器去別人的網(wǎng)站上取得數(shù)據(jù),再返回給你。domain1下的a向同域下的GetData.aspx請求數(shù)據(jù),GetData.aspx向domain2下的 ResponseData.aspx發(fā)送請求,ResponseData.aspx返回數(shù)據(jù)給GetData.aspx, GetData.aspx再返回給a,這樣就完成了一次數(shù)據(jù)請求。GetData.aspx在其中充當了代理的作用。具體可以看下我的代碼。
四、這個和上個的區(qū)別就是請求是使用<script>標簽來請求的,這個要求也是兩個域都是由你來開發(fā)才行。原理就是JS文件注入,在本域內(nèi)的a 內(nèi)生成一個JS標簽,它的SRC指向請求的另外一個域的某個頁面b,b返回數(shù)據(jù)即可,可以直接返回JS的代碼。因為script的src屬性是可以跨域的。具體看代碼,這個也比較簡單。
在父窗口中獲取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();
在iframe中獲取父窗口的元素
格式:window.parent.document.getElementById("父窗口的元素ID").click();
實例:window.parent.document.getElementById("btnOk").click();
jquery
在父窗口中獲取iframe中的元素
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
實例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
實例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
在iframe中獲取父窗口的元素
格式:$('#父窗口中的元素ID', parent.document).click();
實例:$('#btnOk', parent.document).click();
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
js通過window.open(url)下載文件并修改文件名
這篇文章主要給大家介紹了關于js如何通過window.open(url)下載文件并修改文件名的相關資料,我們知道下載文件是一個非常常見的需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08
JS中數(shù)組實現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串)
這篇文章主要介紹了JS中數(shù)組實現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串),代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
javascript下arguments,caller,callee,call,apply示例及理解
在看到大家如此關注JS里頭的這幾個對象,我試著把原文再修改一下,力求能再詳細的闡明個中意義2009-12-12
使用webpack/gulp構(gòu)建TypeScript項目的方法示例
這篇文章主要介紹了使用webpack/gulp構(gòu)建TypeScript項目的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12

