zoukankan      html  css  js  c++  java
  • BOM 中的location对象和history对象

    • location 对象

      • location 对象是window对象下的一个属性,使用时可以省略window对象

      • location可以获取或者设置浏览地址栏的URL

    <body>
        <input type="button" value="点击显示" id="btn">
        <p id="txt"></p>
        <script>
            var btn = document.getElementById("btn");
            var txt = document.getElementById("'txt");
            btn.onclick = function(){
                //输出URL地址
                txt.innerHTML = location.href;
                //重新赋值,可以跳转到新页面,并记录历史
                location.href = "http://www.baidu.com";
            };
        </script>
    </body>
    
    • assign 委派 ,assign()方法的作用 与href属性一样,可以跳转新页面
    location.assign("http://www.baidu.com");
    
    • replace 替换,替换掉地址栏当前地址,不记录历史,无法回退
    <input type="button" value="点击" id="btn">
        <script>
            var btn = document.getElementById("btn");
            btn.onclick = function(){
               location.replace("http://www.baidu.com");
            };
        </script> 
    
    • reload 重新加载,与F5(类似于false效果刷新)刷新一样,ctrl + F5强制刷新
      参数:true:强制从服务器获取页面;false 如果浏览器有缓存页面的话,会直接从缓存中获取页面
    location.reload(true);
    
    • URL

      • 统一资源定位符(Uniform Resource Locator,URL)

      • URL组成:scheme://host:port/path?query#fragment

        scheme:通信协议,常用的http,ftp,maito等

        host:主机,服务器(计算机)域名系统(DNS)主机名或IP地址

        port:端口号,整数,可选,省略时使用方案的默认端口,如http默认端口号是80

        path:路径,由零或多个 ‘ / ’ 符号隔开的字符串,一般用来表示主机上的一个目录或文件地址

        query:查询,可选,用于给动态网页传递参数,可以有多个参数,用 ‘&’ 符合隔开,每个参数的名和值用 ‘=’ 符合隔开

        fragment:信息片段,字符串,锚点

    • history 对象

      • history 对象是window对象下的一个属性,使用时可省略window对象
      • history 对象可以与浏览器历史记录进行交互,浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存。从而实现前进后退来回访问。
        • back()
        • forward()
        • go()

    利用history实现页面跳转,

    <body>
        <h1>一级页面</h1>
        <a href="second.html">跳转到另一个html页面</a><br>
        <input type="button" value="前进" id="btn">
    
        <script>
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                //点击之后 查看之前记录的跳转页面
                history.forward();
                
            }
       </script>
    </body>
    

    second.html 页面回退到页面一功能

            //second.html 页面回退功能
            btn.onclick = function(){
                //点击之后 查看之前记录的跳转页面
                history.back();
            }
    

    使用go()也可以实现页面之间的跳转,在go() 方法里, 前进就在括号里写+1,后退则-1。注意,页面层级多了,go()里的数字也要相应改变

            //go() 方法 前进+1,后退 —1
            btn.onclick = function(){
                //前进
                history.go(1);
                // 后退
                history.go(-1);
    
                //页面层级多了,go()里的数字也要相应改变
                // 回退两层
                history.go(-2);
            }
        </script>
    </body>
    

    一般不常用,浏览器自带有前进后退功能。

  • 相关阅读:
    天明闹钟开发过程3
    降低 TCP ACK 延迟造成的网络性能损失
    TCP SYN,ACK 详解
    TCP的SEQ和ACK的生成
    python之线程(threading)
    python之进程(multiprocess)
    python之发送邮件~
    python之函数参数问题(参数为可变对象)
    python之斐波那契数列递归推导在性能方面的反思
    linux中一些简便的命令之tac/comm
  • 原文地址:https://www.cnblogs.com/dreamtown/p/14490976.html
Copyright © 2011-2022 走看看