js實現跨域請求的若干方法

2021-08-07 08:55:39 字數 1080 閱讀 1796

這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、網域名稱、埠有任何乙個不同,都被當作是不同的域。

下表給出了相對同源檢測的結果:

要解決跨域的問題,我們可以使用以下幾種方法:

在js中,我們直接用xmlhttprequest請求不同域上的資料時,是不可以的。但是,在頁面上引入不同域上的js指令碼檔案卻是可以的,jsonp正是利用這個特性來實現的。

比如,有個a.html頁面,它裡面的**需要利用ajax獲取乙個不同域上的json資料,假設這個json資料位址是那麼a.html中的**就可以這樣:

瀏覽器都有乙個同源策略,其限制之一就是第一種方法中我們說的不能通過ajax的方法去請求不同源中的文件。 它的第二個限制是瀏覽器中不同域的框架之間是不能進行js的互動操作的。有一點需要說明,不同的框架之間(父子或同輩),是能夠獲取到彼此的window物件的,但蛋疼的是你卻不能使用獲取到的window物件的屬性和方法(html5中的postmessage方法是乙個例外,還有些瀏覽器比如ie6也可以使用top、parent等少數幾個屬性),總之,你可以當做是只能獲取到乙個幾乎無用的window物件。比如,有乙個頁面,它的位址是 , 在這個頁面裡面有乙個iframe,它的src是 很顯然,這個頁面與它裡面的iframe框架是不同域的,所以我們是無法通過在頁面中書寫js**來獲取iframe中的東西的

window物件有個name屬性,該屬性有個特徵:即在乙個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享乙個window.name的,每個頁面對window.name都有讀寫的許可權,window.name是持久存在乙個視窗載入過的所有頁面中的,並不會因新頁面的載入而進行重置。

結語:除了以上幾種方法外,還有flash、在伺服器上設定**頁面等跨域方式,這裡就不做介紹了。

以上四種方法,可以根據專案的實際情況來進行選擇應用,個人認為window.name的方法既不複雜,也能相容到幾乎所有瀏覽器,這真是極好的一種跨域方法。

更多參考:

js跨域請求

js 跨域 為什麼會出現跨域。瀏覽器有同源策略,所謂同源是指 網域名稱 協議 埠相同。網上有很多介紹跨域的介紹,這裡不做詳細解析 解決跨域請求的方式有很多種 當我們正常去請求乙個跨域的介面是會出現錯誤,如下 首先我們建立乙個api介面 我們建立的位址是 http localhost 51355 ho...

JS跨域請求 Ajax跨域請求JSONP

前兩天被問到ajax跨域如何解決,還真被問住了,光知道有個什麼jsonp,迷迷糊糊的沒有說上來。抱著有問題必須解決的態度,我看了許多資料,原來如此。為何一直知道jsonp,但一直迷迷糊糊的不明白呢?網上那些介紹資料都寫的太複雜了!我是能多簡單就多簡單,爭取讓你十分鐘看完!ajax之所以需要 跨域 罪...

JS跨域請求 Ajax跨域請求JSONP

前兩天被問到ajax跨域如何解決,還真被問住了,光知道有個什麼jsonp,迷迷糊糊的沒有說上來。抱著有問題必須解決的態度,我看了許多資料,原來如此。為何一直知道jsonp,但一直迷迷糊糊的不明白呢?網上那些介紹資料都寫的太複雜了!我是能多簡單就多簡單,爭取讓你十分鐘看完!ajax之所以需要 跨域 罪...