BOM与浏览器对象

BOM（Browser Object Model）是浏览器提供的对象模型，核心对象是window。

window 对象

全局作用域

// 全局变量成为window属性
var name = 'test';
console.log(window.name); // 'test'

// let/const不会成为window属性
let age = 18;
console.log(window.age); // undefined

常用方法

// 对话框
window.alert('提示');
window.confirm('确认？');     // 返回boolean
window.prompt('输入：', '');  // 返回输入或null

// 定时器
const id1 = setTimeout(() => {}, 1000);
clearTimeout(id1);

const id2 = setInterval(() => {}, 1000);
clearInterval(id2);

// 窗口操作
window.open('https://example.com');
window.close(); // 关闭当前窗口

尺寸与滚动

// 窗口尺寸
window.innerWidth;   // 视口宽度
window.innerHeight;  // 视口高度
window.outerWidth;   // 浏览器窗口宽度
window.outerHeight;  // 浏览器窗口高度

// 滚动
window.scrollX;  // 水平滚动位置
window.scrollY;  // 垂直滚动位置
window.scrollTo(0, 0);           // 滚动到指定位置
window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑滚动

location 对象

属性

location.href;     // 完整URL
location.protocol; // 'https:'
location.host;     // 'example.com:8080'
location.hostname; // 'example.com'
location.port;     // '8080'
location.pathname; // '/path/page'
location.search;   // '?id=1&name=test'
location.hash;      // '#section'

方法

// 跳转并记录历史
location.href = 'https://example.com';

// 跳转不记录历史
location.replace('https://example.com');

// 重新加载
location.reload();       // 从缓存加载
location.reload(true);   // 强制从服务器加载

解析查询参数

// 使用URLSearchParams
const params = new URLSearchParams(location.search);
params.get('id');      // 获取单个参数
params.has('name');    // 检查参数存在
params.getAll('tag');  // 获取所有同名参数

history 对象

导航方法

history.back();    // 后退
history.forward(); // 前进
history.go(-1);    // 后退一页
history.go(2);     // 前进两页

History API

// 添加历史记录
history.pushState({ page: 1 }, 'title', '/page1');

// 替换当前记录
history.replaceState({ page: 2 }, 'title', '/page2');

// 监听历史变化
window.addEventListener('popstate', function(e) {
    console.log(e.state); // { page: 1 }
});

navigator 对象

浏览器信息

navigator.userAgent;     // 用户代理字符串
navigator.language;      // 'zh-CN'
navigator.platform;      // 'Win32'
navigator.onLine;        // 是否在线
navigator.cookieEnabled; // 是否启用cookie

常用API

// 地理位置需要用户授权
navigator.geolocation.getCurrentPosition(pos => {
    console.log(pos.coords.latitude, pos.coords.longitude);
});

// 剪贴板
navigator.clipboard.writeText('复制内容');
navigator.clipboard.readText().then(text => console.log(text));

// 连接信息
navigator.connection.effectiveType; // '4g'

screen 对象

screen.width;      // 屏幕宽度
screen.height;     // 屏幕高度
screen.availWidth; // 可用宽度（排除任务栏）
screen.availHeight;
screen.colorDepth; // 颜色深度

注意事项

• window方法可以直接调用，alert()等同于window.alert()
• location修改会触发页面跳转，replace()不产生历史记录
• pushState不会触发popstate，只有前进后退才触发
• navigator.geolocation需要HTTPS环境

要点总结

• window是BOM核心，全局变量（var）成为其属性
• location提供URL解析和页面跳转功能
• history支持历史导航和SPA路由
• navigator提供浏览器信息和设备API
• screen提供屏幕尺寸信息

存放路径：articles/JS/进阶/浏览器与DOM高级/BOM与浏览器对象.md