zoukankan      html  css  js  c++  java
  • window.name应用于浏览器端数据存储

    本代码简单地分享利用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>

  • 相关阅读:

    如何找回自己!
    身体锻炼靶心心率!
    圣人言大任之人!
    如何修清净心?(净空老法师法语)
    vim 查询定位!
    深切悼念灾区遇难同胞!
    求后倒零
    植物大战僵尸【二分答案, 加贪心思想】
    植物大战僵尸【二分答案, 加贪心思想】
  • 原文地址:https://www.cnblogs.com/xkzy/p/3890527.html
Copyright © 2011-2022 走看看