BOM（location对象，navigation对象）

最新推荐文章于 2022-11-03 23:12:49 发布

青篱竹枫

最新推荐文章于 2022-11-03 23:12:49 发布

阅读量222

点赞数

分类专栏：前端学习文章标签：大数据

本文链接：https://blog.csdn.net/asdf1234dfty/article/details/125492259

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.location对象

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

URL：统一资源定位符，互联网上的标准资源地址，互联网史上每个文件都有唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它

URL一般语法格式

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议，常用http,ftp,matio等
host	主机（域名）www.itheima.com
port	端口号，可选，省略是使用方案的默认端口，比如http默认80
path	路径，有龙或多个'/'付哈隔开字符串，一般用来表述主机上的一个目录或文件地址
query	参数，以键值对的形式，通过&隔开
fragment	片段，#后买你内容，常见于链接，锚点

1.1 location对象的属性

location对象属性	返回值
`location.href`	获取或设置整个URL
`location.host`	返回主机（域名），www.itcast.com
`location.port`	返回端口号
`location.pathname`	返回路径
`location.search`	返回参数
`location.hash`	返回片段，#后面的内容，常见于链接，锚点

指定时间跳转页面

<body>
  <button>点击</button>
  <div></div>
  <script>
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.addEventListener('click', function () {
      location.href = 'http://www.itcast.cn';
    })
    var timer = 5;
    setInterval(function () {
      if (timer == 0) {
        location.href = 'http://www.itcast.cn';
      } else {
        div.innerHTML = '您将在' + timer + '跳转到首页';
        timer--;
      }
    }, 1000)
  </script>
</body>

1.2 location对象的属性

location对象方法	返回值
location.assign()	与href相同，可以跳转页面，可以后退页面
location.replace()	替换当前页面，因为不记录历史，不能后退页面
location.reload()	小红心加载页面，相当于书信页面，参数为true，表示强制刷新

<body>
  <button>点击</button>
  <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      // location.assign('http://www.itcast.cn');
      location.replace('http://www.itcast.cn');
      location.reload(true);
    })
  </script>
</body>

2.navigation对象

navigator对象包含有关浏览器的信息，他有很多属性，最常用的就是userAgent,该属性可以返回由客户端发送服务器的user-agent头部的值

用于判断设备的代码

  <script>
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|woSBrowser|BrowserNG|WebOS|Symbian|WindowsPhone)/i))) {
      window.location.href = "";//手机
    } else {
      window.location.href = "";//电脑
    }
  </script>

3.histroy对象

window对象给我们提供一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL

history对象方法	作用
back()	可以后退
forward()	前进
go(参数)	前进后退功能，参数1表示前进一个页面，参数-1表示后退一个页面


<body>
  <a href="login.html">点击去往登录页</a>
  <button>后退</button>
  <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      history.back();
      history.go(-1);
    })
  </script>
</body>