JavaScript 浏览器模型

学习目标

掌握 BOM 的核心概念及其与 DOM 的区别，理解其在浏览器交互中的作用。
熟练运用 window、navigator、location、screen 和 history 对象进行浏览器控制。
学会利用 BOM 特性实现动态 URL 管理、历史记录导航及响应式布局适配。
理解浏览器窗口控制方法（如打开、调整大小）及其在实际开发中的应用场景。

BOM

浏览器对象模型 (Browser Object Model, 简称 BOM) 是 JavaScript 中用于与浏览器本身进行交互的核心机制。与文档对象模型 (DOM) 专注于网页内容不同，BOM 赋予了开发者控制浏览器窗口、URL 地址、浏览历史以及用户环境信息的能力。通过 BOM，我们可以实现诸如调整窗口大小、在历史记录中前进后退、检测用户浏览器类型等功能

核心组成

对象	描述
window	代表浏览器窗口，控制窗口大小和位置，同时也是全局对象。
navigator	提供关于用户浏览器和操作系统的详细信息。
location	管理当前 URL，允许获取和修改网页地址。
screen	提供用户屏幕信息，如宽度和高度。
history	提供对浏览器会话历史的访问，支持在用户浏览历史中导航。

Window

window 对象是 BOM 中的顶层对象，它代表了浏览器窗口或标签页本身。浏览器中的所有内容都包含在这个对象之内。在浏览器环境中，全局变量和函数实际上都是 window 对象的属性和方法。

常用方法

window 对象提供了多种与用户交互的方法，例如显示警告框、确认框和输入框。同时，它也是访问其他重要对象（如 document, navigator, screen, location, history）的入口。

// 显示一个警告框
window.alert('你好，世界！');

// 获取浏览器窗口的内部宽度
console.log(window.innerWidth); 

// 以下写法等价，因为 window 是全局对象
alert('你好，世界！'); 
console.log(innerWidth);

功能特点

交互对话框：提供 alert() (警告), confirm() (确认), prompt() (提示输入) 等方法。
全局作用域：所有全局变量自动成为 window 对象的属性。
定时器支持：内置 setTimeout() 和 setInterval() 用于任务调度。
窗口管理：支持打开新窗口 (open) 和关闭窗口 (close)。

Navigator

navigator 对象包含了有关浏览器本身和用户操作环境的信息。它常被用于浏览器特性检测或根据用户环境提供差异化服务。

关键属性

// 获取用户代理字符串 (包含浏览器类型、版本、操作系统等信息)
console.log(navigator.userAgent); 

// 获取用户的首选语言
console.log(navigator.language);

属性详解

userAgent: 返回浏览器的用户代理字符串。虽然可用于识别浏览器及其版本，但由于用户可以伪造该字符串，因此不建议仅依赖它进行关键的逻辑判断（特性检测优于浏览器检测）。
language: 返回用户浏览器设置的首选语言代码（如 zh-CN 或 en-US），常用于国际化 (i18n) 场景。

Location

location 对象提供了当前文档的 URL 信息，并允许开发者读取或修改地址栏内容，从而实现页面跳转或参数处理。

基本用法

// 获取当前页面的完整 URL
console.log(location.href); 

// 跳转到新的页面
location.href = 'https://www.google.com/';

核心属性

属性	描述	示例值
href	返回或设置当前页面的完整 URL。	`https://www.example.com/path?id=1`
protocol	返回 URL 的协议部分。	`https:`
hostname	返回 URL 的主机名 (域名或 IP)。	`www.example.com`
pathname	返回 URL 的路径部分 (域名之后)。	`/path/to/page`
search	返回 URL 的查询字符串部分。	`?id=1&name=test`
hash	返回 URL 的锚点部分。	`#section1`

Screen

screen 对象提供了关于用户显示器屏幕的信息，这对于实现响应式设计或全屏应用非常有用。

常用属性

// 获取屏幕的总宽度
console.log(screen.width);

// 获取屏幕的总高度
console.log(screen.height);

// 获取可用工作区宽度 (排除任务栏等)
console.log(screen.availWidth);

应用场景

响应式布局辅助：虽然 CSS 媒体查询是主流，但在某些复杂的 JS 逻辑中，可能需要根据屏幕物理分辨率加载不同资源。
全屏应用：在游戏或视频播放器中，根据屏幕尺寸初始化画布大小。

History

history 对象允许脚本访问浏览器的会话历史记录。出于安全考虑，脚本无法读取具体的历史 URL 列表，但可以进行导航操作。

导航方法

// 后退一页 (相当于点击浏览器的后退按钮)
history.back(); 

// 前进一页 (相当于点击浏览器的前进按钮)
history.forward(); 

// 加载历史堆栈中的特定页面 (负数表示后退，正数表示前进)
history.go(-1);

窗口控制

BOM 还允许开发者通过 window.open() 打开新窗口，并使用 resizeTo() 方法调整窗口尺寸。

代码示例

// 打开一个新窗口
// 参数：URL, 窗口名称, 特性字符串 (宽度 500, 高度 500)
let newWindow = window.open("https://www.example.com/", "NewWindow", "width=500,height=500");

// 将新打开的窗口调整为 300x300 像素
if (newWindow) {
    newWindow.resizeTo(300, 300);
}

执行逻辑

window.open() 方法会启动一个新浏览器窗口或标签页，加载指定 URL，并按照特性字符串设置初始尺寸。
resizeTo(width, height) 方法随后被调用，将窗口的外部尺寸（包括边框和标题栏）调整为指定像素。
注意：现代浏览器出于用户体验和安全考虑（防止弹窗滥用），通常会阻止非用户触发的 window.open() 行为，或者忽略 resizeTo() 对标签页的调整（通常只对独立窗口有效）。