博主信息
博文 143
粉丝 1
评论 0
访问量 425334
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
window.name跨域
弘德誉曦的博客
原创
1719人浏览过
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跨域也就这些了。

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学