常用的 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 事件监听页面的历史出栈操作。

实例演示
预览 复制