BOM 浏览器对象模型 Browser Object Model

元信息

• 目标：知道 js 除了操作文档还能"触碰"浏览器的哪些部件——通过 BOM 读取浏览器与运行时信息、程序化操控窗口；与 DOM（文档）划清分工
• 关键概念：BOM、window、location、history、screen、navigator、用户代理（User-Agent）
• 关联阶段：cp3
• 常见误区：以为 js 只能改页面（BOM 让它能感知并操控浏览器窗口本身）；忘了 window 是全局根对象（全局变量其实是它的属性）；把 navigator 误当"导航对象"（它代表浏览器信息，名字是历史遗留）

示例

• 浏览器信息 http://www.runoob.com/try/try.php?filename=try_nav_all
• 更多 http://www.runoob.com/js/js-ex-browser.html

定义

• 与 DOM 代表浏览器中的文档相似，BOM 代表着浏览器自身
• 通过 BOM, 网页开发者可以了解到浏览器的信息和运行时的信息，还可以通过程序化的方式操控浏览器

关键概念

• window: 全局对象; 根对象；
  • 全局变量都是此对象的属性
  • 全局函数都是此对象的方法
  • 其它全局对象，如 document 也是此对象的属性之一
  • 代表浏览器窗口，提供窗口新建、引用访问等操作
• location: 代表地址栏，可获知当前页面地址信息，可模拟刷新等操作
• history: 代表访问历史，可模拟上一步下一步等操作
• screen: 代表窗口的屏幕相关属性，如分辨率信息等尺寸
• navigator: 代表浏览器，如浏览器厂商名称、版本号等信息

用户代理检测与统计工具

• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent
• https://developers.whatismybrowser.com/useragents/explore/
• https://deviceatlas.com/blog/list-of-user-agent-strings
• browser 特性探测 https://browscap.org/
• 百度统计 https://tongji.baidu.com/web/demo/visit/client?siteId=5503017

教程

• http://www.runoob.com/js/js-window.html
• http://www.runoob.com/jsref/met-win-open.html