window.name+iframe实现跨域

window.name属性有这样的特点:
当前页设置的值, 在页面重新加载(非同域也可以)后, 值依然不变.
比如:

window.name = 'abc';
window.name; // abc
window.location = 'https://www.baidu.com';
window.name; // abc

利用这个加上iframe就可以实现跨域数据传递.
iframe会创建一个 新的窗口(也就是一个 干净的环境), 也有name属性.

下面来实验下:

├── one/
│   ├── a.html
│   └── proxy.html
└── two/
    └── b.html

利用http-server来模拟跨域的情况:

cd one/
screen -S one http-server -p 8001
cd ../two/
screen -S two http-server -p 8002
google-chrome https://localhost:8001/a.html

注意上述用了端口不同来制造非同源的情况.
其中页面主要代码如下:
proxy.html是一个空白页面, 主要是为了和a.html通信用.

b.html提供数据用:

<script>
    window.name = 'b.html\'s data';
</script>

a.html

<script type="text/javascript">
var otherLoaded = false,
iframe = document.createElement('iframe'),
loadfn = function() {
    if (otherLoaded) {
        var data = iframe.contentWindow.name; // 读取数据
        alert(data); // 弹出b.html's data

        // 清理工作
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    } else if (!otherLoaded) {
        otherLoaded = true;
        iframe.contentWindow.location = "https://localhost:8001/proxy.html"; // 设置的代理文件
    }
};
iframe.src = 'https://localhost:8002/b.html';
if (iframe.attachEvent) {
    iframe.attachEvent('onload', loadfn);
} else {
    iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>

可以看到, 第一次设置iframe的地址为b.html, 这样的话b.html会被加载进来,
但是并不能直接访问iframe.contentWindow.name, 因为a.html和b.html目前不同源,
如果将loadfn的实现改为var data = iframe.contentWindow.name;,会出来这个错误:

a.html:14 Uncaught DOMException: Blocked a frame with origin "https://localhost:8001" from accessing a cross-origin frame.

那怎么办呢, 既然不同源, 就改成同源呗, 所以将iframe地址改成与a.html同源的proxy.html,
由于window.name在地址变化时值不变, 所以iframe.contentWindow.name的值还是之前的值, 也就是b.html窗口的值, 而又满足的同源的要求, 所以可以访问成功.

参考:
https://www.tuicool.com/articles/viMFbqV

欢迎补充指正!