JavaScript中的location对象(学习笔记)

文章目录

• ​​释义​​
• ​​Location对象的属性​​

• ​​案例说明​​

• ​​5分钟自动跳转页面​​
• ​​获取URL参数​​

• ​​Location对象常见方法​​

• ​​简单示例​​

释义

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

Location对象的属性

老师说重点是​

​href​

​​与​

​search​

​

Location对象的属性	返回值
location.href	获取或者设置url
location.host	返回主机(域名)
location.port	返回端口号，若无则返回空
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段#后面内容常见于链接锚点

案例说明

5分钟自动跳转页面

<script>
 var timer = 5;
 setInterval(function() {
      if (timer == 0) {
          location.href = '跳转地址';
      } else {
          div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
          timer--;
       }
}, 1000);
</script>      

获取URL参数

<div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>      

Location对象常见方法

对象方法	返回值
location.assign()	跟href 一样，可以跳转页面(也称为重定向页面)
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面

简单示例

<script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('url');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('url');
            location.reload(true);
        })
    </script>