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跨域也就这些了。
收藏
