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>

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

最后编辑于：2021.03.06 15:43:53