window.name跨域

在頁面在瀏覽器端展示的時候见秤，我們總能在控制臺拿到一個全局變量window，該變量有一個name屬性谨娜，其有以下 特征：
1）每個窗口都有獨立的window.name與之對應(yīng)；
2）在一個窗口的生命周期中（被關(guān)閉前），窗口載入的所有頁面同時共享一個window.name慈缔，每個頁面對window.name都有讀寫的權(quán)限；
3）window.name一直存在與當(dāng)前窗口后众，即使是有新的頁面載入也不會改變window.name的值胀糜；
4）window.name可以存儲不超過2M的數(shù)據(jù)，數(shù)據(jù)格式按需自定義蒂誉。

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

<script>
    // 這里是要傳輸?shù)臄?shù)據(jù)右锨，大小一般為2M括堤，IE和firefox下可以大至32M左右
    // 數(shù)據(jù)格式可以自定義，如json绍移、字符串
    window.name = "這是a頁面的內(nèi)容"; 
    setTimeout(function(){
        window.location.href= b.html;
        console.log(window.name);  //"這是a頁面的內(nèi)容"
    },2000);
</script>

有時候我們的需求是在https://localhost/a.html頁面內(nèi)悄窃，獲得"https://xxx.github.io/xxx/"上的數(shù)據(jù)，并且頁面不能進行刷新蹂窖。

對于這種需求轧抗，我們不能通過window.location.href更新頁面來獲得數(shù)據(jù)，我們可以用一個隱藏的iframe作為中間的代理瞬测，iframe的src為"https://xxx.github.io/xxx/"横媚，在iframe頁面加載完畢的時候，我們再讓iframe與當(dāng)前頁面屬于同一個域下月趟，我們就可以拿到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地址改變，與當(dāng)前頁面同源,可以任意寫孝宗，保持同源就好
    }
</script>
<iframe id="iframe" src="https://xxx.github.io/xxx/" onload="load()"></iframe>

上面的代碼就是window.name的原理演示代碼穷躁，下面我們封裝一個完整的跨域，包括動態(tài)的創(chuàng)建iframe因妇，獲取數(shù)據(jù)后銷毀代理的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); 
            //銷毀數(shù)據(jù)   
            iframe.contentWindow.document.write('');
            iframe.contentWindow.close();
            document.body.removeChild(iframe);
        } else {
            boo = true;
            iframe.contentWindow.location = "b.html";    // 設(shè)置的代理文件,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跨域也就這些了猿诸。