本代码简单地分享利用window.name实现浏览器端数据存储： 
1、在同一个页面一个地方设置window.name = "abc"，另外一个地方读取window.name，自然能得到"abc"，这个很简单就不举例了 
2、利用window.name实现页面跨域交互：demo.html是主页面，proxy.html是一个空的HTML文件（由于OSC不允许不输入任何代码，所以这里加了个空script），这两个文件都在同一个域下；remote.html是另外某个域下的文件 
代码中有这么两处设置： 
     frame.contentWindow.location = self.cfg.proxyUrl;
     和
     frame.src=url;
这里说明下：
     第一处设置是为了设置当前页面地址栏显示的URL（这样浏览器历史记录中也存的是这个），它是一个站内URL
     第二处设置是为了让iframe显示的文档来自远程页面
​1.图片
​
​2. [代码]demo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>window.name实现跨域主页面</title>
    </head>
    <body>
        <button id="getDataBt">获取数据</button>
        <div id="result"></div>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script>
            $(function() {
                dataRequest = {
                    _doc : document,
                    cfg: {
                        proxUrl: 'proxy.html'  // proxy.html是一个空文件
                    }
                };
                 
                dataRequest.send = function(url, callback) {
                    if(!url || typeof url !== "string") {
                        return;
                    }
                     
                    var frame = this._doc.createElement("iframe"), state = 0, self = this;
                    this._doc.body.appendChild(frame);
                    frame.style.display = "none";
                     
                    var clear = function() {
                        try {http://www.huiyi8.com/qzone/​
                            frame.contentWindow.document.write('');
                            frame.contentWindow.close();
                            self._doc.body.removeChild(frame);
                        }QQ空间背景
                        catch(e) {
                             
                        }
                    };
                     
                    var getData = function() {
                        try {
                            var data = frame.contentWindow.name;
                        }
                        catch(e) {
                             
                        }
                         
                        clear();
                         
                        if(callback && typeof callback === "function") {
                            callback(data);
                        }
                    };
                     
                    $(frame).load(function() {
                        if(state === 1) {
                            getData();
                        }
                        else if(state === 0) {
                            state = 1;
                            frame.contentWindow.location = self.cfg.proxyUrl;
                        }
                    });
                    frame.src = url;   // 设置frame的src属性为远程页面的URL
                };
                 
                var testUrl = 'remote.html?' + new Date().getTime();
                 
                $("#getDataBt").click(
                    function() {
                        dataRequest.send(testUrl, function(result) {
                            $("#result").html(result);
                        });
                    }
                );
            });
        </script>
    </body>
</html>
3. [代码]proxy.html

<script type="text/javascript">
   //
</script>
4. [代码]remote.html    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>远程页面</title>
    </head>
    <body>
        <div id="content">
            我是远程数据，来自remote.html！
        </div>
    </body>
    <script type="text/javascript">
        window.name = document.getElementById("content").innerHTML;
    </script>
</html>
​

window.name应用于浏览器端数据存储的更多相关文章

  1. Web Storage：浏览器端数据储存机制

    目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...

  2. 浏览器本地数据存储解决方案以及cookie的坑

    本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...

  3. JS中浏览器的数据存储机制

    一.JS中的三种数据存储方式 cookie.sessionStorage.localStorage 二.cookie 1.cookie的定义: cookie是存储在浏览器上的一小段数据,用来记录某些当 ...

  4. JavaScript浏览器本地数据存储

    浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...

  5. 常见的浏览器端的存储技术：cookie

    工作原理: cookie是存在用户硬盘中,用户每次访问站点时,Web应用程序都可以读取Cookie包含的信息.当用户再次访问这个站点时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie. ...

  6. 仿Redis用来作前端浏览器的数据存储结构

    用js写了一个类似redis存储结构的类库,目前只有的存储类型只有hash.set两个, 还没测试过性能,欢迎各位猿友能够帮我指出程序代码的缺陷, 后期有时间会完善其他几个类型的存储结构. /**** ...

  7. HTML 5浏览器端数据库

    HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...

  8. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

  9. 浏览器端-W3School-Browser：Window 对象

    ylbtech-浏览器端-W3School-Browser:Window 对象 1.返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架 ...

随机推荐

  1. javaweb学习总结(八)——HttpServletResponse对象(二)（转）

    (每天都会更新至少一篇以上,有兴趣的可以关注)转载自孤傲苍狼 一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedI ...

  2. Codeforces956D. Contact ATC

    $n \leq 100000$个飞机在坐标轴上,给坐标给速度,坐标速度异号,还有一个风速在$[-w,w]$区间,$w$比最小的速度绝对值要小.由于风速不知道,所以问有多少对飞机可能在原点相遇. 思维定 ...

  3. Kail命令

    启动/关闭无线网卡 ifconfig wlan0 up  /  ifconfig wlan0 down 更改Mac地址: macchanger -A wlan0 启动监听 airmon-ng star ...

  4. ci框架——辅助函数

    辅助函数:application/helper下面.命名要求为***_helper.php;这样在调用的时候直接$this->load->helper('***');若想给自定义的辅助函数 ...

  5. spring-boot-nginx代理-docker-compose部署

    在本地测试,使用docker部署不用在意环境 java测试项目: web框架:spring boot 框架 项目管理:maven 数据库:redis + postgres + mongo 部署相关:n ...

  6. delphi使用IdHTTP模拟提交页面方法总结

    http://blog.csdn.net/lxdcyh/article/details/3986800 1.拖入TIdHTTP控件,HandleRedirect设为True,否则可能会出现HTTP 3 ...

  7. github/gitlab ssh-keys全局唯一

    我们知道,通过在gitlab.github上设置ssh-key,可以直接拉取代码:git clone …… 公司为了代码安全,会对代码访问权限进行控制,不同人有不同代码的访问权限. 有时候,为了临时获 ...

  8. BUPT 2012复试机考 4T

    题目描述 我们都学习过计算机网络,知道网络层IP协议数据包的头部格式如下: 其中IHL表示IP头的长度,单位是4字节:总长表示整个数据包的长度,单位是1字节.传输层的TCP协议数据段的头部格式如下:  ...

  9. ubuntu 添加和删除用户

    Without a home directory sudo useradd myuser With home directory sudo useradd -m myuser Then set the ...

  10. 生活娱乐 Wifi机器人的制作流程

    思路简单,但是创意无限~~ 动手能力超强 牛人教你做Wifi机器人(图) 一.前言 Wifi机器人(Wifi Robot):其实是一辆能通过互联网,或500米以外的笔记本无线设施来远程控制的遥控汽车. ...