怎么用JS中的window.name實現跨域數據傳輸

這篇文章主要講解了“怎么用JS中的window.name實現跨域數據傳輸”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用JS中的window.name實現跨域數據傳輸”吧！

一、 window.name的性質

window.name有一個奇妙的性質，
頁面如果設置了window.name，那么在不關閉頁面的情況下，
即使進行了頁面跳轉location.href=...，這個window.name還是會保留。

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

// 打開瀏覽器輸入URL:www.neiyidaogou.com
//F12打開控制臺
//在控制臺中依次輸入下面內容

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

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

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

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

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

二、 跨域請求

我們知道，使用iframe的src屬性，可以加載不同域中的網頁，
我們也可以使用$('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內頁面的完整的window對象。

三、整合

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

這個頁面載入之后，讓它設置自己的window.name，
然后再讓它進行當前頁面的跳轉，跳轉到與iframe外的頁面同域的頁面，
此時window.name是不會改變的。

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

假設有三個頁面：

a.com/app.html：應用頁面。

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

b.com/data.html：應用頁面需要獲取數據的頁面，可稱為數據頁面。

實現起來基本步驟如下：

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

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

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

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

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

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

總結起來即：

iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。

感謝各位的閱讀，以上就是“怎么用JS中的window.name實現跨域數據傳輸”的內容了，經過本文的學習后，相信大家對怎么用JS中的window.name實現跨域數據傳輸這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！