javascript iframe跨域詳解
1.什么引起了ajax跨域不能的問題
ajax本身實際上是通過XMLHttpRequest對象來進(jìn)行數(shù)據(jù)的交互,而瀏覽器出于安全考慮,不允許js代碼進(jìn)行跨域操作,所以會警告。
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ā)才可以。可以將book.aa.com用iframe添加到 www.aa.com的某個頁面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",這樣就可以統(tǒng)一域了,可以實現(xiàn)跨域訪問。就和平時同一個域中鑲嵌iframe一樣,直接調(diào)用里面的JS就可以了。(這個辦法我沒有嘗試,不過理論可行)
二、當(dāng)兩個域不同時,如果想相互調(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就會記錄歷史,你在前進(jìn)和后退時就需要處理,非常麻煩。不過再做簡單的處理時還是可以用的,具體的代碼我再下面有下載。大體的過程是頁面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ù)的,同樣報沒有權(quán)限的錯誤,需要a把這個傳過來,所以也比較麻煩),同樣a里面也要做監(jiān)聽,如果hash變化的話就取得返回的數(shù)據(jù),再做相應(yīng)的處理。
三、這種情形是最經(jīng)常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個,也就是另外一個是別人的,人家告訴你你要取得數(shù)據(jù)就訪問某某連接參數(shù)是什么樣子的,最后返回數(shù)據(jù)是什么格式的。而你需要做的就是在你的域下新建一個網(wǎng)頁,讓服務(wù)器去別人的網(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在其中充當(dāng)了代理的作用。具體可以看下我的代碼。
四、這個和上個的區(qū)別就是請求是使用<script>標(biāo)簽來請求的,這個要求也是兩個域都是由你來開發(fā)才行。原理就是JS文件注入,在本域內(nèi)的a 內(nèi)生成一個JS標(biāo)簽,它的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();
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
Javascript實現(xiàn)數(shù)組中的元素上下移動
這篇文章主要給大家介紹了Javascript實現(xiàn)數(shù)組中的元素上下移動的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-04-04ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用
本文主要介紹了ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10帶大家了解一下JavaScript常見的五個內(nèi)存錯誤
這篇文章主要為大家介紹了JavaScript常見的五個內(nèi)存錯誤,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08js+canvas實現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07Bootstrap編寫一個同時適用于PC、平板、手機(jī)的登陸頁面
這篇文章主要為大家詳細(xì)介紹了Bootstrap編寫一個同時適用于PC、平板、手機(jī)的登陸頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-06-06JavaScript設(shè)計模型Iterator實例解析
這篇文章主要介紹了JavaScript設(shè)計模型Iterator實例解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01