快捷導(dǎo)航

JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸

更新時間：2022年01月30日 11:10:57 投稿：wdc

這篇文章主要介紹了JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸,需要的朋友可以參考下

一、 window.name的性質(zhì)

window.name有一個奇妙的性質(zhì)，
頁面如果設(shè)置了window.name，那么在不關(guān)閉頁面的情況下，
即使進(jìn)行了頁面跳轉(zhuǎn)location.href=...，這個window.name還是會保留。

我們可以在控制臺做一下實驗：

// 打開瀏覽器輸入URL:www.fzitv.net
//F12打開控制臺
//在控制臺中依次輸入下面內(nèi)容

//輸入
window.name;
//返回
''

//輸入
window.name='test';
//返回
'test'

//輸入
location.;
//返回
http://www.baidu.com

//輸入
window.name;
//返回
'test'

利用這一點，我們就可以拿到其他域中的數(shù)據(jù)了。

二、跨域請求

我們知道，使用iframe的src屬性，可以加載不同域中的網(wǎng)頁，
我們也可以使用$('iframe').contentWindow來拿到iframe中頁面的window對象，
只是這個window對象中可以訪問的屬性是很少的。

//控制臺輸入
Object.keys($('iframe').contentWindow);

//返回
["postMessage", "blur", "focus", "close", "parent", "opener", "top", "length", "frames", "closed", "location", "self", "window"]

訪問其他屬性，會報錯：

Uncaught DOMException: Blocked a frame with origin "..." from accessing a cross-origin frame.

而如果使用iframe加載同域的頁面，訪問$('iframe').contentWindow的屬性是不會報錯的，它就是iframe內(nèi)頁面的完整的window對象。

三、整合

利用window.name的性質(zhì)，我們可以在iframe中加載一個跨域頁面。

這個頁面載入之后，讓它設(shè)置自己的window.name，
然后再讓它進(jìn)行當(dāng)前頁面的跳轉(zhuǎn)，跳轉(zhuǎn)到與iframe外的頁面同域的頁面，
此時window.name是不會改變的。

這樣，iframe內(nèi)外就屬于同一個域了，且window.name還是跨域的頁面所設(shè)置的值。

假設(shè)有三個頁面：

a.com/app.html：應(yīng)用頁面。

a.com/proxy.html：代理文件，一般是一個沒有任何內(nèi)容的html文件，需要和應(yīng)用頁面在同一域下。

b.com/data.html：應(yīng)用頁面需要獲取數(shù)據(jù)的頁面，可稱為數(shù)據(jù)頁面。

實現(xiàn)起來基本步驟如下：

在應(yīng)用頁面（a.com/app.html）中創(chuàng)建一個iframe，把其src指向數(shù)據(jù)頁面（b.com/data.html）。
數(shù)據(jù)頁面會把數(shù)據(jù)附加到這個iframe的window.name上，data.html代碼如下：

<script type="text/javascript">
    window.name = 'I was there!';    // 這里是要傳輸?shù)臄?shù)據(jù)，大小一般為2M，IE和firefox下可以大至32M左右
                                     // 數(shù)據(jù)格式可以自定義，如json、字符串
</script>

在應(yīng)用頁面（a.com/app.html）中監(jiān)聽iframe的onload事件，在此事件中設(shè)置這個iframe的src指向本地域的代理文件（代理文件和應(yīng)用頁面在同一域下，所以可以相互通信）。app.html部分代碼如下：

<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
        if (state === 1) {
            var data = iframe.contentWindow.name;    // 讀取數(shù)據(jù)
            alert(data);    //彈出'I was there!'
        } else if (state === 0) {
            state = 1;
            iframe.contentWindow.location = "http://a.com/proxy.html";    // 設(shè)置的代理文件
        }  
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', loadfn);
    } else {
        iframe.onload  = loadfn;
    }
    document.body.appendChild(iframe);
</script>

獲取數(shù)據(jù)以后銷毀這個iframe，釋放內(nèi)存；這也保證了安全（不被其他域frame js訪問）。

<script type="text/javascript">
    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
</script>

總結(jié)起來即：