常用的 BOM 相关对象 下载APP
章节索引 :

常用的 BOM 相关对象

通常与 BOM 相关的常用对象有:

  • Location 当前页面地址相关信息,如当前页面地址
  • Navigator 当前浏览器相关信息,如浏览器版本
  • Screen 包含屏幕相关信息,如屏幕的长宽
  • History 浏览器的历史相关信息,如返回上一页

其他的还有一些辅助方法,如 alertconfirm

这些内容都可以通过 window 对象进行访问。

这些对象在访问时开头是小写的!

1. Location

window.location 只读属性,返回一个 Location 对象,其中包含有关文档当前位置的信息。(MDN)

与 location 相关的最常用的就是跳转了。

给 location 的 href 属性赋值,就可以实现页面的跳转。

window.location.href = '//imooc.com';

图片描述

还有另外两种方式也可以实现页面跳转。

window.location = '//imooc.com';

window.location.assign('//imooc.com');

用的比较的多的就是修改 href 属性。

使用 replace 方法也可以跳转到新页面,但是调用后就无法再后退了。

location 下还有其他与路径相关的信息,可以通过输出到控制台观察。

图片描述

  • origin 源,相当于协议与主机、主域的组合,具有兼容性问题
  • protocol 协议
  • host 主机名和当前 URL 的端口号
  • hostname 当前 URL 的主机名
  • port 端口
  • pathname 路径部分
  • search 查询字符串
  • hash hash值(#后面部分)
  • href 当前 URL

Node.js 文档中的一张表就很好的描述了 URL 的各个组成部分,结合表更好理解这些属性。

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

另外常用的还有 reload 方法,用于刷新页面。

只读属性 Window.navigator 会返回一个 Navigator 对象的引用,可以用于请求运行当前代码的应用程序的相关信息。(MDN)

navigator 最常用到的就是 userAgent 属性,通常简称为 UA

console.log(navigator.userAgent);

// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
// 不同设备的输出不一定相同

该属性包含了一些浏览器、操作系统、设备等信息,通常判断平台,如 iosandroid,或者判断浏览器都会使用这个属性。

userAgent 并不是很准确,特别是一些被拉黑名单的第三方的浏览器厂商,通过伪造 UA 欺骗网站,防止被拦截,比如通将 UA 设置成某个版本的 Chrome 浏览器,达到伪造浏览器的目的。

除了 userAgent,其他的内容用到的相对较少。

但也有比较有趣的属性,比如 onLine,这个属性可以用于判断网络状态。

console.log(navigator.onLine); // true or false

图片描述

如果网站需要支持 i18n (国际化),还会用到 language 属性。

其他的一些处于试验性的特性,也会被放在 navigator 下。如以前申请媒体设备需要使用 navigator.getUserMedia,后来随着特性的升级,变成了MediaDevices.getUserMedia()

3. Screen

返回当前window的screen对象。screen对象实现了Screen接口,它是个特殊的对象,返回当前渲染窗口中和屏幕有关的属性。(MDN)

想要获取当前浏览器所在屏幕的分辨率,就可以通过 screenwidthheight 来获取。

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

console.log('分辨率: ' + screenWidth + 'x' + screenHeight);

图片描述

4. History

Window.history是一个只读属性,用来获取History 对象的引用,History 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面)的接口。(MDN)

history 主要用于操作浏览器历史相关的内容,如前进、后退。

通常用的最多的就是 history.back(),即返回上一页。

history.back();

图片描述

history 还可以实现前端路由。

通过 history.pushState 可以改变页面的路径,但不会触发页面的跳转。

通过 popstate 事件监听页面的历史出栈操作。

实例演示
预览 复制
复制成功!
<section id="app">
  <a href="user" class="link">用户中心</a>
  <a href="setting" class="link">设置</a>

  <div class="container"></div>
</section>

<script>
  // 注册路由
  document.querySelectorAll('.link').forEach(function(item) {
    item.addEventListener('click', function(e) {

      e.preventDefault();

      // 拿到需要注册的地址
      let link = item.getAttribute('href');
      // 往history中添加一个历史记录   0-参数 1-title 2-url
      window.history.pushState({name: link}, link, link);

      // 具体要做的业务
      document.querySelector('.container').innerHTML = link;

    }, false);
  });

  // 监听路由
  window.addEventListener('popstate', function(e) {
    console.log({
      location: location.href,
      state: e.state
    });
    document.querySelector('.container').innerHTML = e.state.name;
  }, false);
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

图片描述

通过 pushState 向历史栈增加一条历史,添加后根据路径显示对应的页面内容。

popstate 监听到出栈的时候就可以拿到上一条页面栈的页写信息,可以做一些其他操作,如还原上一个页面内容。

观察 network 会发现并没有进行页面的跳转。但需要注意的是刷新后可能会 404,这个时候就需要服务端处理跳转或者代理服务器做配置。

因为路径改变后,浏览器再次访问当前地址,可能找不到这个地址对应的资源。

这是前端路由的一种实现方式,采用 History API,也是面试中会经常考到的题目。另一种方式是使用 hash 实现,兼容性更好,并且不需要服务端或代理服务器做配合实现。

5. 小结

BOM 相关的对象经常会被使用到,但每个对象使用到的内容并不是非常多。

通过对象的名字也可以知道其大致的作用,所以当碰到某些需求,如 “浏览器的某些信息” 的时候,就应该想到 Navigator 对象下有没有可以帮助实现需求的内容。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源