常用的 BOM 相关对象
通常与 BOM 相关的常用对象有：@H_ 419 _6@
Location 当前页面 地址相关信息，如 当前页面 地址 Navigator 当前浏览器相关信息，如浏览器版本 Screen 包含屏幕相关信息，如屏幕的长宽 History 浏览器的历史相关信息，如返回 上一页
其他的还有一些辅助 方法 ，如 alert 、 confirm 。@H_ 419 _6@
这些 内容 都可以通过 window 对象进行访问。@H_ 419 _6@
这些对象在访问时开头是小写的！@H_ 419 _6@
1. Location
window.location 只读 属性 ，返回 一个 Location 对象，其中包含有关文档当前位置的信息。(MDN)@H_ 419 _6@
与 location 相关的最常用的就是 跳转 了。@H_ 419 _6@
给 location 的 href 属性 赋值，就可以实现 页面 的 跳转 。@H_ 419 _6@
window . location . href = '//imooc.com' ;
@H_ 419 _6@@H_ 419 _6@
还有另外两种方式也可以实现 页面 跳转 。@H_ 419 _6@
window . location = '//imooc.com' ; window . location . assign ( '//imooc.com' ) ;
用的比较的多的就是 修改 href 属性 。@H_ 419 _6@
使用 replace 方法 也可以 跳转 到新 页面 ，但是 调用 后就无法再后退了。@H_ 419 _6@
location 下还有其他与路径相关的信息，可以通过 输出 到控制台观察。@H_ 419 _6@
@H_ 419 _6@@H_ 419 _6@
origin 源，相当于协议与主机、主域的组合，具有兼容性问题 protocol 协议 host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 port 端口 pathname 路径部分 search 查询 字符串 hash hash值(#后面部分) href 当前 URL
Node.js 文档中的一张表就很好的描述了 URL 的各个组成部分，结合表更好理解这些 属性 。@H_ 419 _6@
┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ 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 方法 ，用于刷新 页面 。@H_ 419 _6@
只读 属性 Window.navigator 会返回 一个 Navigator 对象的引用，可以用于请求运行当前 代码 的应用程序的相关信息。(MDN)@H_ 419 _6@
navigator 最常用到的就是 userAgent 属性 ，通常简称为 UA 。@H_ 419 _6@
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 // 不同设备的 输出 不一定相同
该 属性 包含了一些浏览器、操作系统、设备等信息，通常判断平台，如 ios 、 android ，或者判断浏览器都会使用这个 属性 。@H_ 419 _6@
但 userAgent 并不是很准确，特别是一些被拉黑名单的第三方的浏览器厂商，通过伪造 UA 欺骗网站，防止被 拦截 ，比如通将 UA 设置成某个版本的 Chrome 浏览器，达到伪造浏览器的目的。@H_ 419 _6@
除了 userAgent ，其他的 内容 用到的相对较少。@H_ 419 _6@
但也有比较有趣的 属性 ，比如 onLine ，这个 属性 可以用于判断网络状态。@H_ 419 _6@
console . log ( navigator . onLine ) ; // true or false
@H_ 419 _6@@H_ 419 _6@
如果网站需要 支持 i18n (国际化)，还会用到 language 属性 。@H_ 419 _6@
其他的一些处于试验性的特性，也会被放在 navigator 下。如以前申请媒体设备需要使用 navigator.getUserMedia ，后来随着特性的 升级 ，变成了 MediaDevices.getUserMedia() 。@H_ 419 _6@
3. Screen
返回当前window的screen对象。screen对象实现了Screen接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的 属性 。(MDN)@H_ 419 _6@
想要 获取 当前浏览器所在屏幕的分辨率，就可以通过 screen 的 width 和 height 来 获取 。@H_ 419 _6@
var screenWidth = window . screen . width ; var screenHeight = window . screen . height ; console . log ( '分辨率: ' + screenWidth + 'x' + screenHeight ) ;
@H_ 419 _6@@H_ 419 _6@
4. History
Window.history是 一个 只读 属性 ，用来 获取 History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的 页面 ，以及 当前页面 中通过框架加载的 页面 ）的接口。(MDN)@H_ 419 _6@
history 主要用于操作浏览器历史相关的 内容 ，如前进、后退。@H_ 419 _6@
通常用的最多的就是 history.back() ，即返回 上一页 。@H_ 419 _6@
history . back ( ) ;
@H_ 419 _6@@H_ 419 _6@
history 还可以实现前端路由。@H_ 419 _6@
通过 history.pushState 可以改变 页面 的路径，但不会触发 页面 的 跳转 。@H_ 419 _6@
通过 popstate 事件监听 页面 的历史出栈操作。@H_ 419 _6@
@H_ 419 _458@@H_ 419 _458@ < section id = " app " > @H_ 419 _458@@H_ 419 _458@ < a href = " user " class = " link " > 用户 中心@H_ 419 _458@@H_ 419 _458@ </ a > @H_ 419 _458@@H_ 419 _458@ < a href = " setting " class = " link " > 设置@H_ 419 _458@@H_ 419 _458@ </ a > @H_ 419 _458@@H_ 419 _458@ < div class = " container " > @H_ 419 _458@@H_ 419 _458@ </ div > @H_ 419 _458@@H_ 419 _458@ </ section > @H_ 419 _458@@H_ 419 _458@ < 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 ) ; @H_ 419 _458@@H_ 419 _458@ </ script >
@H_ 419 _6@@H_ 419 _6@
通过 pushState 向历史栈 增加 一条历史， 添加 后根据路径 显示 对应的 页面 内容 。@H_ 419 _6@
当 popstate 监听到出栈的时候就可以拿到上一条 页面 栈的页写信息，可以做一些其他操作，如还原上 一个 页面 内容 。@H_ 419 _6@
观察 network 会发现并没有进行 页面 的 跳转 。但需要注意的是刷新后可能会 404 ，这个时候就需要服务端处理 跳转 或者代理服务器做配置。@H_ 419 _6@
因为路径改变后，浏览器再次访问当前地址，可能找不到这个地址对应的资源。@H_ 419 _6@
这是前端路由的一种实现方式，采用 History API ，也是面试中会经常考到的题目。另一种方式是使用 hash 实现，兼容性更好，并且不需要服务端或代理服务器做配合实现。@H_ 419 _6@
5. 小结
BOM 相关的对象经常会被使用到，但每个对象使用到的 内容 并不是非常多。@H_ 419 _6@
通过对象的名字也可以知道其大致的作用，所以当碰到某些需求，如 “浏览器的某些信息” 的时候，就应该想到 Navigator 对象下有没有可以帮助实现需求的 内容 。@H_ 419 _6@
BOM 常用属性和方法 ? ?什么是 BOM声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92433