HoRain云--深入解析JavaScript BOM：掌控浏览器窗口的秘密-平芜编程栈

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

⛳️ 推荐

专栏介绍

JavaScript Window - 浏览器对象模型(BOM)

JavaScript Window - 浏览器对象模型(BOM)

基本概念

浏览器对象模型(Browser Object Model，简称BOM)是JavaScript与浏览器窗口进行交互的一套API。它没有官方标准，但现代浏览器已实现了通用方法和属性，使BOM成为前端开发中控制浏览器行为的核心机制。

BOM的核心是Window对象，它代表浏览器窗口本身，是JavaScript的全局对象。所有全局变量、函数和对象都自动成为Window对象的属性和方法。

Window对象的核心地位

全局作用域：在浏览器中，所有未明确声明作用域的变量和函数都属于Window对象
- 例如：var x = 1;等同于window.x = 1;
- alert()等同于window.alert()
BOM的顶层对象：Window对象是BOM的根对象，其他BOM对象（如document、location、history、navigator、screen）都是它的属性

BOM与DOM的关系

特性	DOM (Document Object Model)	BOM (Browser Object Model)
关注点	网页文档内容（HTML/XML结构）	浏览器窗口和环境
根对象	document对象	window对象
标准化	由W3C严格标准化	没有官方标准，但浏览器实现趋于一致
交互对象	操纵网页中的HTML元素、属性、样式	操控浏览器窗口、历史、URL、屏幕等

简单来说：DOM让你控制网页内容，BOM让你控制浏览器

Window对象的主要功能

Window对象的常用属性

属性	说明
`innerWidth`/`innerHeight`	浏览器窗口内部宽度和高度（不包括工具栏和滚动条）
`outerWidth`/`outerHeight`	浏览器窗口外部宽度和高度（包括边框）
`scrollX`/`scrollY`	窗口水平和垂直滚动位置
`location`	当前URL信息对象
`history`	浏览器历史记录对象
`navigator`	浏览器和设备信息对象
`screen`	屏幕信息对象

BOM的兼容性考虑

由于BOM没有官方标准，不同浏览器对某些功能的支持可能有差异：

旧版IE（8、7、6、5）中获取窗口尺寸需要特殊处理：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

userAgent可被伪造，建议结合特性检测来判断功能支持

实用示例

// 获取窗口尺寸（兼容所有浏览器） var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 打开新窗口 var newWindow = window.open('https://example.com', '_blank', 'width=500,height=400'); // 获取浏览器信息 console.log("浏览器类型: " + navigator.userAgent); console.log("操作系统: " + navigator.platform); // 导航到新页面 window.location.href = 'https://newpage.com';