JavaScript高级程序设计笔记 12

第12章 BOM（浏览器对象模型）

1. 概述

• BOM 提供与浏览器窗口和页面内容无关的 JavaScript API。
• 核心对象：window（浏览器窗口，也是 ES 全局对象）。
• 其他对象：location、navigator、history、screen。

2. window 对象

2.1 全局作用域

• 所有全局声明的变量/函数都会成为 window 的属性/方法。
• 但 let、const 不会挂载到 window。
• 访问全局属性可直接写 window.property，若省略 window 则沿作用域链查找。

2.2 窗口关系与框架

• window.top：最顶层窗口（浏览器标签页对应的窗口）。
• window.parent：当前窗口的父窗口（若无则为自身）。
• window.self：指向自身（等同于 window）。

2.3 窗口位置与大小

• 位置：
  • window.screenLeft / window.screenX：窗口相对于屏幕左侧的距离。
  • window.screenTop / window.screenY：窗口相对于屏幕顶部的距离。
  • window.moveTo(x, y)、window.moveBy(dx, dy)（常被浏览器限制）。
• 大小：
  • window.innerWidth / window.innerHeight：视口大小（含滚动条）。
  • window.outerWidth / window.outerHeight：浏览器窗口大小。
  • document.documentElement.clientWidth / clientHeight：视口大小（不含滚动条，更常用）。
  • window.resizeTo(w, h)、window.resizeBy(dw, dh)（常被浏览器限制）。

2.4 视口与像素比

• window.devicePixelRatio：物理像素与 CSS 像素的比例（高分屏常见 2 或 3）。

2.5 打开/关闭窗口

• window.open(url, target, features, replace)：
  • 返回对新窗口的引用。
  • target 可以是 _blank、_self 等。
  • features 字符串控制新窗口特性（如 width=400,height=400）。
• window.close()：关闭窗口（仅对通过 window.open 打开的窗口有效）。

2.6 系统对话框

• alert(message)：警告框。
• confirm(message)：确认框，返回布尔值。
• prompt(message, default)：输入框，返回用户输入的字符串或 null。
• 以上方法会阻塞 JavaScript 执行。

3. location 对象

• 提供当前窗口加载文档的信息，并允许导航。
• window.location 与 document.location 等价。

3.1 属性

属性	示例	说明
href	http://www.example.com:80/path?q=1#hash	完整 URL
protocol	http:	协议（含冒号）
host	www.example.com:80	主机名+端口
hostname	www.example.com	主机名
port	80	端口号
pathname	/path	路径
search	?q=1	查询字符串（含问号）
hash	#hash	片段标识符（含 #）

3.2 方法

• assign(url)：加载新文档（可回退）。
• replace(url)：加载新文档（替换当前历史记录，不可回退）。
• reload(force)：重新加载。force=true 强制从服务器加载（绕过缓存）。
• 直接设置 location.href = url 等价于 assign。

4. navigator 对象

• 提供浏览器相关信息，常用于特性检测（而非浏览器检测）。

4.1 常用属性

属性	说明
userAgent	浏览器用户代理字符串
platform	操作系统平台
language	浏览器主语言
languages	浏览器接受的语言数组
onLine	是否联网
cookieEnabled	是否启用 cookie
hardwareConcurrency	CPU 核心数
sendBeacon(url, data)	异步发送数据（常用于页面卸载时发送统计）

4.2 检测插件

• navigator.plugins：数组，列出所有已安装插件（不包含 Flash，需单独处理）。

5. screen 对象

• 提供客户端屏幕信息（不常用）。
• 属性：width、height（屏幕分辨率）、availWidth、availHeight（可用区域，除去任务栏）。

6. history 对象

• 管理浏览器历史记录（不能读取具体 URL，只能导航）。

6.1 方法

• back()：后退一步。
• forward()：前进一步。
• go(n)：前进/后退 n 步（go(-1) 等价 back()）。
• length：历史记录总数。

6.2 HTML5 历史 API（SPA 核心）

• pushState(state, title, url)：添加新历史记录，不加载页面（需要配合 popstate 事件）。
• replaceState(state, title, url)：替换当前历史记录。
• popstate 事件：用户点击后退/前进时触发，可以获取 state 对象。

7. 常见面试题速查

1. 如何获取浏览器视口尺寸？
   → window.innerWidth/innerHeight 或 document.documentElement.clientWidth/clientHeight。

2. location.assign 和 location.replace 的区别？
   → assign 会留下历史记录，可后退；replace 替换当前记录，无法后退。

3. 如何强制刷新页面？
   → location.reload(true)。

4. navigator.userAgent 有什么缺点？
   → 可被伪造，不建议用于浏览器判断，推荐特性检测。

5. history.pushState 和 replaceState 的作用？
   → 修改历史记录但不刷新页面，用于单页应用路由。

6. popstate 事件何时触发？
   → 用户点击后退/前进按钮，或调用 history.back()、history.go() 时触发。

7. 如何检测用户是否在线？
   → navigator.onLine（只能检测网络是否连接，不一定能访问互联网）。

8. window.open 可能被浏览器阻止？
   → 若不在用户触发的回调中调用（如 click 事件之外），可能会被弹窗拦截器阻止。

9. 如何解析 URL 的查询参数？
   → 可用 URLSearchParams 或正则拆分 location.search。

10. sendBeacon 的用途？
    → 在不阻塞页面卸载的情况下发送异步数据，适合统计上报。