javascript BOM是什么_它提供了哪些浏览器对象?

BOM是浏览器厂商实现的非标准化接口,以window为顶层对象,提供location、history、navigator、screen等对象及open()、setTimeout()等方法,用于操作浏览器窗口而非网页内容。

BOM(Browser Object Model)不是标准,而是浏览器厂商实现的一套非标准化接口,它让你能操作浏览器窗口本身——比如跳转页面、弹窗、获取屏幕尺寸,但不涉及网页内容(那是 DOM 的事)。

window 是 BOM 的顶层对象,也是全局作用域

在浏览器中,window 就是 BOM 的根。所有 BOM 对象都挂载在它下面,而且你在全局写的变量、函数,默认就是 window 的属性或方法:

console.log(this === window); // true
var a = 123;
console.log(window.a); // 123
  • window 自动成为 JavaScript 全局对象,所以 alert()setTimeout() 等其实都是 window.alert()window.setTimeout() 的简写
  • 不要手动给 window 赋值(如 window = null),现代浏览器会静默忽略,但可能引发不可预期行为
  • 在 iframe 中,每个 frame 都有自己独立的 window,跨 frame 访问需注意同源限制

location、history、navigator、screen 这四个最常用

它们是 window 下直接可用的对象,用途明确、使用高频:

  • location:控制当前 URL,可读可写
    location.href 获取完整 URL;location.assign("https://example.com") 跳转;location.reload() 刷新
  • history:操作浏览器历史栈
    history.back()history.forward()history.pushState()(单页应用路由核心)
  • navigator:提供客户端信息
    navigator.userAgent(谨慎用,易被伪造);navigator.onLine 判断网络状态(注意:仅反映是否连上网络,不保证能访问服务器)
  • screen:获取屏幕物理/逻辑尺寸
    screen.widthscreen.height 是设备全屏像素;screen.availWidth 才是可用工作区宽度(排除任务栏)

open()、close()、setTimeout() 这些函数也属于 BOM

它们不是对象,但由浏览器提供、与窗口生命周期强相关,属于 BOM 范畴:

  • window.open() 弹出新窗口/标签页,返回新 window 对象;若被浏览器拦截(如非用户触发),返回 null
  • window.close() 只能关闭 JS 自己打开的窗口;对主窗口调用无效(现代浏览器禁用)
  • setTimeout()setInterval()window 方法,其回调函数执行时 this 指向 window(非严格模式下)
  • requestAnimationFrame() 也是 BOM 提供的,用于高性能动画,比 setTimeout 更适合渲染帧同步

真正容易被忽略的是:BOM 接口没有统一标准,不同浏览器版本之间行为差异不小——比如 screen.orientation 在旧版 Safari 不可用,navigation.geolocation 需要 HTTPS 上下文。写兼容代码前,先查 caniuse 或用 typeof navigator.geolocation !== 'undefined' 做运行时检测,别只靠文档想当然。