• 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跨域也就这些了。
    
    
    作者:Bennt
    链接:https://www.jianshu.com/p/43ff69d076e3
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    Java实现蓝桥杯模拟组织晚会
    Java实现蓝桥杯模拟组织晚会
    ffmpeg+rtsp+dss
    开发ffmpeg/live555常见问题错误及解决方法
    SxsTrace工具使用方法
    移植strace调试工具到arm平台
    Linux on Power 上的调试工具和技术
    使用 Strace 和 GDB 调试工具的乐趣
    自助Linux之问题诊断工具strace
    通用Makefile
  • 原文地址:https://www.cnblogs.com/zlq92/p/12345725.html
Copyright © 2020-2023  润新知