JS 跨域訪問的幾種方式

阿新 • • 發佈：2019-02-14

JS中的跨域是受到限制的，但是跨域有時候又是必須的，藉此，各種高手牛人想盡辦法使得JS能夠跨域獲取資料，有的方法真的很巧妙

在此記錄一下常用的三種跨域方法，如下：

一、不同子域名之間的(a.example.com|b.example.com)的跨域訪問。

　　這種跨域呼叫比較常見，比如a.example.com 下的 a.htm 頁面，需要呼叫 b.example.com 下的 b.htm頁面裡面的getData函式，首先需要在a.htm頁面中用iframe 框架把b.htm頁面引用進來

<iframe id="b" src="http://b.example.com/b.htm" frameborder="on"></iframe>

然後同時在a.htm頁面與b.htm頁面中設定：document.domain = "example.com"; 這樣a.htm就可以獲取b.htm中的window documet 然後來獲取b.htm中的資料getData了，獲取b.htm中的document方法為：

function getIframeDocument(id){
    returen document.getElementById(id).contentDocument || document.getElementById(id).document;
}

二、不同域名之間的hash傳遞引數（www.a.com | www.b.com）

　　常見的一個例子就是iframe自動適應大小，a域名下的a.htm 框架（iframe）了b域名中的b.htm,而b.htm的大小是不固定的，這時候就需要通過跨域傳遞b.htm的寬度與高度到a.htm中。

　　這個引數是怎麼傳遞的呢？是通過hash來傳遞的(www.b.com/b.htm#width|height)其中#號後面的引數width|height 即為window.location.hash的值

而改變hash的值也不會造成頁面的跳轉，但是這樣還是跨域的，所以需要在a域下增加一個c.htm中間頁面，這樣c.htm與a.htm之間就是相同的域下，可以傳遞數

據，把c.htm頁面通過iframe到b.htm中，由b.htm控制，看下圖：現在的關係為，a.htm中iframe加入了b.htm，b.htm頁面中iframe加入了c.htm

　　a.htm程式碼如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo</title>
</head>
<body>
<div id="show">這是A域a</div>
<iframe id="b_iframe" src="http://www.b.com/b.htm" frameborder="on" border="1px" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" ></iframe>
</body>
</html>

b.htm程式碼如下：

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/c.htm" style="display:none" ></iframe>
<script type="text/javascript">
        var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
        var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
        console.log(b_width);
        var c_iframe = document.getElementById("c_iframe");
        console.log(c_iframe.src);
        c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 這裡通過hash傳遞b.htm的寬高
        /* http://www.b.com/c.html#width|height */

</script>

c.htm程式碼如下：

<script type="text/javascript">
        var b_iframe = parent.parent.document.getElementById("b_iframe");//a與c是同域，可以通過parent獲取到a.htm中的包含b.htm的框架的dom
        var hash_url = window.location.hash; //這裡可以獲取b.htm中傳遞過來的width|height        var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; //分別獲取值
        var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
        console.log("hash_width=" + hash_width);
        console.log("hash_height=" + hash_height);

        b_iframe.style.width = hash_width; //a與c頁面是同域，可以設定樣式
        b_iframe.style.height = hash_height;</script>

這樣就可以通過hash來傳遞資料，缺點是隻支援string型別，大小受到限制！

三、通過jsonp來實現不通域名之間跨域傳遞資料。

什麼是jsonp（JSONP即JSON with Padding。由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、埠）的資源。如果要進行跨域請求，我們可以通過使用 html的script標記來進行跨域請求，並在響應中返回要執行的script程式碼，其中可以直接使用JSON傳遞javascript物件。這種跨域的通訊方式稱為JSONP。）

　　通俗來講就是通過<script type="text/javascript" src="呼叫生成JS檔案的地址並傳遞迴調引數"></script> 來呼叫要執行的程式碼。

　　也可以通過createElement('script')來生成，如下：　　

var JSONP = document.createElement("script") ;//然後設定其src屬性

　　因為JS檔案無論在什麼地方都可以呼叫並執行，比如各種統計JS等，回撥引數是怎麼回事呢，就是告訴要傳遞資料的頁面給把資料通過這個函式傳遞給我，大家

大家可以試一下下面這個地址：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

上面的地址是flicker的API，其中的jsoncallback=? 中的問號替換成你自定義的回撥函式，然後對方就會通過這個回撥函式給你傳遞資料：

比如隨便起名一個回撥函式vvgcallback：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=vvgcallback

然後對方生成的js就是這樣的(可以把以上地址複製到位址列測試)：

vvgcallback({
        "title": "Recent Uploads tagged cat",
        "link": "http://www.flickr.com/photos/tags/cat/",
        "description": "",
        "modified": "2012-08-15T06:07:40Z",
        "generator": "http://www.flickr.com/",
        "items": [
       {
            "title": "A squirell about to jump",
            "link": "http://www.flickr.com/photos/[email protected]/7786494040/",
            "media": {"m":"http://farm9.staticflickr.com/8422/7786494040_a7a506dfdc_m.jpg"},
            "date_taken": "2012-08-10T15:19:40-08:00",
            "description": " <p><a href=\"http://www.flickr.com/people/[email protected]/\">Dr arun kapoor<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/[email protected]/7786494040/\" title=\"A squirell about to jump\"><img src=\"http://farm9.staticflickr.com/8422/7786494040_a7a506dfdc_m.jpg\" width=\"240\" height=\"191\" alt=\"A squirell about to jump\" /><\/a><\/p> <p><\/p>",
            "published": "2012-08-15T06:07:40Z",
            "author": "[email protected] (Dr arun kapoor)",
            "author_id": "[email protected]",
            "tags": "barcelona china california birthday christmas city family flowers blue autumn friends england blackandwhite bw food dog baby india house holiday chicago canada black france flower color berlin green bird art fall film beach halloween church girl car fashion birds animals bike festival architecture clouds cat canon germany garden de geotagged fun graffiti hawaii dance football concert asia europe day florida band australia iphone instagramapp"
       },
       {
            "title": "catkeywest",
            "link": "http://www.flickr.com/photos/marshawheatley/7786461540/",
            "media": {"m":"http://farm8.staticflickr.com/7120/7786461540_5e3e28bd3a_m.jpg"},
            "date_taken": "2012-08-14T22:57:21-08:00",
            "description": " <p><a href=\"http://www.flickr.com/people/marshawheatley/\">MarshaWheatley<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/marshawheatley/7786461540/\" title=\"catkeywest\"><img src=\"http://farm8.staticflickr.com/7120/7786461540_5e3e28bd3a_m.jpg\" width=\"240\" height=\"180\" alt=\"catkeywest\" /><\/a><\/p> ",
            "published": "2012-08-15T06:08:53Z",
            "author": "[email protected] (MarshaWheatley)",
            "author_id": "[email protected]",
            "tags": "old cat town florida keywest"
       }]
})

就相當與在頁面執行vvgcallback()函式，括號中間的就是傳遞的JSON資料。這樣就想當於在你的頁面裡面執行了以上的程式碼。從而實現了跨域傳遞資料。

JS 跨域訪問的幾種方式

解決瀏覽器跨域的幾種方式

web前端之跨域的幾種方式

跨域的幾種方式

Vue專案中跨域的幾種方式

關於跨域,以及跨域的幾種方式

關於跨域，以及跨域的幾種方式

詳解跨域的幾種方式

前端解決 API 跨域的幾種方式

關於瀏覽器跨域的幾種方式

前端跨域的幾種方式

前端處理跨域的幾種方式

跨域的幾種方式：cors.jsonp.iframe

JS 跨域訪問的幾種方式

js中實現跨域的幾種方法

跨域有幾種處理方式？

web前端js跨域的兩種實現方式jsonp和src

跨域的幾種常見的解決方式

三種方法實現js跨域訪問

JS實現繼承的幾種方式（轉）

JS實現繼承的幾種方式

JS 跨域訪問的幾種方式

相關推薦