javascript iframe跨域詳解
1.什么引起了ajax跨域不能的問題
ajax本身實(shí)際上是通過XMLHttpRequest對(duì)象來進(jìn)行數(shù)據(jù)的交互,而瀏覽器出于安全考慮,不允許js代碼進(jìn)行跨域操作,所以會(huì)警告。
2.有什么完美的解決方案么?
沒有。解決方案有不少,但是只能是根據(jù)自己的實(shí)際情況來選擇。
具體情況有:
一、本域和子域的相互訪問: 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)建動(dòng)態(tài)腳本
解決方法:
一、如果想做到數(shù)據(jù)的交互,那么www.aa.com和book.aa.com必須由你來開發(fā)才可以??梢詫ook.aa.com用iframe添加到 www.aa.com的某個(gè)頁面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",這樣就可以統(tǒng)一域了,可以實(shí)現(xiàn)跨域訪問。就和平時(shí)同一個(gè)域中鑲嵌iframe一樣,直接調(diào)用里面的JS就可以了。(這個(gè)辦法我沒有嘗試,不過理論可行)
二、當(dāng)兩個(gè)域不同時(shí),如果想相互調(diào)用,那么同樣需要兩個(gè)域都是由你來開發(fā)才可以。用iframe可以實(shí)現(xiàn)數(shù)據(jù)的互相調(diào)用。解決方案就是用window.location對(duì)象的hash屬性。hash屬性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改變hash值網(wǎng)頁不會(huì)刷新,可以這樣實(shí)現(xiàn)通過JS訪問hash值來做到通信。不過除了IE之外其他大部分瀏覽器只要改變hash就會(huì)記錄歷史,你在前進(jìn)和后退時(shí)就需要處理,非常麻煩。不過再做簡單的處理時(shí)還是可以用的,具體的代碼我再下面有下載。大體的過程是頁面a和頁面b在不同域下,b通過iframe添加到a里,a通過JS修改iframe的hash值,b里面做一個(gè)監(jiān)聽(因?yàn)镴S只能修改hash,數(shù)據(jù)是否改變只能由b自己來判斷),檢測到b的hash值被修改了,得到修改的值,經(jīng)過處理返回a需要的值,再來修改a的hash值(這個(gè)地方要注意,如果a 本身是那種查詢頁面的話比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是無法取得數(shù)據(jù)的,同樣報(bào)沒有權(quán)限的錯(cuò)誤,需要a把這個(gè)傳過來,所以也比較麻煩),同樣a里面也要做監(jiān)聽,如果hash變化的話就取得返回的數(shù)據(jù),再做相應(yīng)的處理。
三、這種情形是最經(jīng)常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個(gè),也就是另外一個(gè)是別人的,人家告訴你你要取得數(shù)據(jù)就訪問某某連接參數(shù)是什么樣子的,最后返回?cái)?shù)據(jù)是什么格式的。而你需要做的就是在你的域下新建一個(gè)網(wǎng)頁,讓服務(wù)器去別人的網(wǎng)站上取得數(shù)據(jù),再返回給你。domain1下的a向同域下的GetData.aspx請(qǐng)求數(shù)據(jù),GetData.aspx向domain2下的 ResponseData.aspx發(fā)送請(qǐng)求,ResponseData.aspx返回?cái)?shù)據(jù)給GetData.aspx, GetData.aspx再返回給a,這樣就完成了一次數(shù)據(jù)請(qǐng)求。GetData.aspx在其中充當(dāng)了代理的作用。具體可以看下我的代碼。
四、這個(gè)和上個(gè)的區(qū)別就是請(qǐng)求是使用<script>標(biāo)簽來請(qǐng)求的,這個(gè)要求也是兩個(gè)域都是由你來開發(fā)才行。原理就是JS文件注入,在本域內(nèi)的a 內(nèi)生成一個(gè)JS標(biāo)簽,它的SRC指向請(qǐng)求的另外一個(gè)域的某個(gè)頁面b,b返回?cái)?shù)據(jù)即可,可以直接返回JS的代碼。因?yàn)閟cript的src屬性是可以跨域的。具體看代碼,這個(gè)也比較簡單。
在父窗口中獲取iframe中的元素
格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 實(shí)例:window.frames["ifm"].document.getElementById("btnOk").click();
格式:
var obj=document.getElementById("iframe的name").contentWindow; var ifmObj=obj.document.getElementById("iframe中控件的ID"); ifmObj.click(); 實(shí)例: var obj=document.getElementById("ifm").contentWindow; var ifmObj=obj.document.getElementById("btnOk"); ifmObj.click();
在iframe中獲取父窗口的元素
格式:window.parent.document.getElementById("父窗口的元素ID").click(); 實(shí)例:window.parent.document.getElementById("btnOk").click();
jquery
在父窗口中獲取iframe中的元素
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 實(shí)例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2 實(shí)例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
在iframe中獲取父窗口的元素
格式:$('#父窗口中的元素ID', parent.document).click(); 實(shí)例:$('#btnOk', parent.document).click();
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
Javascript實(shí)現(xiàn)數(shù)組中的元素上下移動(dòng)
這篇文章主要給大家介紹了Javascript實(shí)現(xiàn)數(shù)組中的元素上下移動(dòng)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-04-04ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用
本文主要介紹了ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10帶大家了解一下JavaScript常見的五個(gè)內(nèi)存錯(cuò)誤
這篇文章主要為大家介紹了JavaScript常見的五個(gè)內(nèi)存錯(cuò)誤,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Bootstrap編寫一個(gè)同時(shí)適用于PC、平板、手機(jī)的登陸頁面
這篇文章主要為大家詳細(xì)介紹了Bootstrap編寫一個(gè)同時(shí)適用于PC、平板、手機(jī)的登陸頁面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06微信小程序request請(qǐng)求封裝,驗(yàn)簽代碼實(shí)例
這篇文章主要介紹了微信小程序request請(qǐng)求封裝,驗(yàn)簽代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12JavaScript設(shè)計(jì)模型Iterator實(shí)例解析
這篇文章主要介紹了JavaScript設(shè)計(jì)模型Iterator實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01