本代码简单地分享利用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. c/s委托练习

    今天玩了玩C/S开发,也随便练习了很久不用的委托 父窗体中写的代码 #region 委托与事件传递    public delegate void TextChangedHandler(string ...

  2. AtCoder Grand Contest 005F - Many Easy Problems

    $n \leq 200000$的树,从树上选$k$个点的一个方案会对$Ans_k$产生大小为“最小的包括这$k$个点的连通块大小”的贡献.求每个$Ans_k$.膜924844033. 看每个点对$An ...

  3. 【shell】shell编程（一）-入门

    如今,不会Linux的程序员都不意思说自己是程序员,而不会shell编程就不能说自己会Linux.说起来似乎shell编程很屌啊,然而不用担心,其实shell编程真的很简单.背景 什么是shell编程 ...

  4. Kail命令

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

  5. php——两种无限级分类

    /** * 无级递归分类 TP框架 * @param int $assortPid 要查询分类的父级id * @param mixed $tag 上下级分类之间的分隔符 * @return strin ...

  6. 在ScrollView添加一个ListView造成的滚动问题的简单解决办法（）

    正常来说,在ScrollView添加一个ListView后在真机上只会显示ListView的一行多一点,我也不理解为什么会这样,后来我把ListView的layout_height改成400dip,而 ...

  7. Spring MVC集成Spring Data Reids和Spring Session实现Session共享出现：No bean named 'springSessionRepositoryFilter' available

    出现这个问题:No bean named 'springSessionRepositoryFilter' available的的原因: 1.Spring MVC加载了多个配置文件导致的,并不是版本问题 ...

  8. cart树剪枝

    当前子树的损失函数: $C_a(T) = C(T) + a|T|$, 其中$C(T)$为对训练数据的预测误差,$|T|$为树的叶子结点数目,反映模型的复杂度.对固定的$a$,一定存在使损失函数$C_a ...

  9. ZT：三十个好习惯

  10. three.js 源代码凝视（九）Math/Matrix4.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...