JS跨域--window.name

window.name跨域

在頁面在瀏覽器端展示的時候，我們總能在控制檯拿到一個全局變量window，該變量有一個name屬性，其有以下 特徵：
1）每個窗口都有獨立的window.name與之對應；
2）在一個窗口的生命週期中（被關閉前），窗口載入的所有頁面同時共享一個window.name，每個頁面對window.name都有讀寫的權限；
3）window.name一直存在與當前窗口，即使是有新的頁面載入也不會改變window.name的值；
4）window.name可以存儲不超過2M的數據，數據格式按需自定義。

下面我們就驗證一下同一個窗口下，頁面重新載入，window.name仍然不變

<script>
    // 這裏是要傳輸的數據，大小一般爲2M，IE和firefox下可以大至32M左右
    // 數據格式可以自定義，如json、字符串
    window.name = "這是a頁面的內容"; 
    setTimeout(function(){
        window.location.href= b.html;
        console.log(window.name);  //"這是a頁面的內容"
    },2000);
</script>

有時候我們的需求是在https://localhost/a.html頁面內，獲得"https://xxx.github.io/xxx/"上的數據，並且頁面不能進行刷新。

對於這種需求，我們不能通過window.location.href更新頁面來獲得數據，我們可以用一個隱藏的iframe作爲中間的代理，iframe的src爲"https://xxx.github.io/xxx/"，在iframe頁面加載完畢的時候，我們再讓iframe與當前頁面屬於同一個域下，我們就可以拿到window.name了。

<script>
    function load () {
        var iframe = document.getElementById('iframe');
        iframe.onload = function () {
            var window = iframe .contentWindow;
            console.log(window.name);
        }
        iframe.src = 'about:blank'; //讓url地址改變，與當前頁面同源,可以任意寫，保持同源就好
    }
</script>
<iframe id="iframe" src="https://xxx.github.io/xxx/" onload="load()"></iframe>

上面的代碼就是window.name的原理演示代碼，下面我們封裝一個完整的跨域，包括動態的創建iframe，獲取數據後銷燬代理的iframe。

<script type="text/javascript">
    var boo = false;
    var iframe = document.createElement('iframe');
    var loadData = function() {
        if (boo) {
            var data = iframe.contentWindow.name;    //獲取window.name
            console.log(data); 
            //銷燬數據   
            iframe.contentWindow.document.write('');
            iframe.contentWindow.close();
            document.body.removeChild(iframe);
        } else {
            boo = true;
            iframe.contentWindow.location = "b.html";    // 設置的代理文件,iframe重新載入
        }  
    };
    iframe.src = 'https://xxx.github.io/xxx';
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', loadData);
    } else {
        iframe.onload  = loadData;
    }
    document.body.appendChild(iframe);
</script>

window.name跨域也就這些了。