🎬 HoRain云小助手：个人主页

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

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

---

⛳️ 推荐

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

专栏介绍

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

目录

⛳️ 推荐

专栏介绍

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

基本概念

Window对象的核心地位

BOM与DOM的关系

Window对象的主要功能

1. 文档访问

2. 窗口管理

3. 对话框

4. 导航控制

5. 浏览器信息检测

6. 屏幕信息

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对象的主要功能

1. 文档访问

• window.document：获取当前窗口的文档对象
• 例如：window.document.getElementById("header") 等同于 document.getElementById("header")

2. 窗口管理

• open(url, target, features)：打开新窗口
• close()：关闭当前窗口
• moveTo(x, y)：移动窗口到指定位置
• resizeTo(width, height)：调整窗口大小

3. 对话框

• alert(message)：显示警告框
• confirm(message)：显示确认框
• prompt(message, default)：提示用户输入

4. 导航控制

• location.href：获取或设置当前页面URL
• location.reload()：刷新当前页面
• history.back()：后退到上一页
• history.forward()：前进到下一页

5. 浏览器信息检测

• navigator.userAgent：获取浏览器用户代理字符串
• navigator.platform：获取操作系统平台
• navigator.language：获取浏览器语言设置
• navigator.onLine：判断是否联网

6. 屏幕信息

• screen.width、screen.height：获取屏幕分辨率
• screen.availWidth、screen.availHeight：获取可用屏幕尺寸

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';

总结

BOM是JavaScript与浏览器交互的核心机制，Window对象作为BOM的顶层对象，提供了控制浏览器窗口、获取浏览器信息、管理URL和历史记录等关键功能。理解BOM对于前端开发者实现窗口控制、用户体验优化和浏览器环境检测至关重要。尽管BOM没有官方标准，但现代浏览器已实现了通用的API，使BOM成为前端开发中不可或缺的工具。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙