location对象

最新推荐文章于 2023-03-10 20:51:10 发布

清晨投递

最新推荐文章于 2023-03-10 20:51:10 发布

阅读量442

点赞数

分类专栏： javaScript 文章标签：前端

本文链接：https://blog.csdn.net/weixin_51244384/article/details/122489800

版权

javaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、什么是location对象？

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

二、URL

三、location对象的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.seach	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

重点记住：href 和 seach

案例：5秒后自动跳转页面

<body>
  <button>点击</button>

  <script>
    // 获取btn
    var btn = document.querySelector('button');
    var count = 5;
    btn.onclick = function () {
      btn.disabled = true;
      btn.innerHTML = count;
      var timer = setInterval(function () {
        if (count == 0) {
          btn.disabled = false;
          btn.innerHTML = '点击'
          count = 5;
          clearInterval(timer);
          // location.href 设置网址
          location.href = 'http://www.baidu.com';
        } else {
          count--;
          btn.innerHTML = count;
        }
      }, 1000)
    }
  </script>
</body>

案例：获取URL参数

<body>
  <div></div>
  <script>
    console.log(location.search); // 返回参数 ?uname = name
    var div = document.querySelector('div');
    var name = location.search;// 获取查询参数
    // substr 截取字符串 截取?以后的字符串 split 字符串转换数组
    var newName = name.substr(1).split('='); // ['uname','name']
    // 把数据写入div
    div.innerHTML = newName[1] + '欢迎您';
  </script>
</body>

效果：

四、location对象的常见方法

location对象方法	返回值
location.assign()	跟href一样，跳转页面（也称为重定向页面）
location.replace()	替换当前页面，不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新或F5，参数为true，则为强制刷新，F5+ctrl

<body>
  <button>点击</button>
  <script>
    var btn = document.querySelector('button');
    btn.onclick = function () {
      // location.assign 跳转页面 有历史记录 可以后退
      location.assign('http://www.baidu.com');
      // location.replace 替换当前页面 没有历史记录 不能后退
      location.replace('http://www.baidu.com');
      // location.reload 刷新 参数为true时,为强制刷新
      location.reload();
      location.reload(true);
    }
  </script>
</body>

清晨投递

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
location对象

目录一、什么是location对象？二、URL三、location对象的属性案例：5秒后自动跳转页面案例：获取URL参数四、location对象的常见方法一、什么是location对象？window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以也将这个对象称为location对象。二、URL三、location对象的属性location对象属性返回值 loc
复制链接

扫一扫