浏览器BOM与窗口对象

BOM（Browser Object Model）提供与浏览器窗口交互的能力。

window对象核心属性

尺寸属性

// 窗口内部尺寸（不含滚动条）
window.innerWidth;
window.innerHeight;

// 窗口外部尺寸（含边框）
window.outerWidth;
window.outerHeight;

// 文档尺寸
document.documentElement.clientWidth;
document.documentElement.clientHeight;

滚动属性

// 滚动位置
window.scrollX;  // 或 pageXOffset
window.scrollY;  // 或 pageYOffset

// 滚动方法
window.scrollTo(0, 500);               // 滚动到指定位置
window.scrollTo({ top: 500, behavior: 'smooth' });  // 平滑滚动
window.scrollBy(0, 100);               // 相对滚动

screen对象

屏幕信息

// 屏幕尺寸
screen.width;     // 屏幕宽度
screen.height;    // 屏幕高度

// 可用屏幕尺寸
screen.availWidth;   // 可用宽度
screen.availHeight;  // 可用高度（减去系统UI）

// 颜色深度
screen.colorDepth;   // 颜色位数

location对象

URL信息

// 当前URL解析
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=123'
location.hash;      // 锚点 '#section'

URL跳转

// 页面跳转（可返回）
location.href = 'https://example.com';

// 页面跳转（不可返回）
location.replace('https://example.com');

// 刷新页面
location.reload();
location.reload(true);  // 强制从服务器刷新

解析查询参数

// URLSearchParams API
const params = new URLSearchParams(location.search);
params.get('id');      // '123'
params.has('name');    // true/false
params.set('page', '1');
params.delete('id');

// 获取所有参数
for (let [key, value] of params) {
    console.log(key, value);
}

history对象

历史记录导航

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

// 历史记录数量
history.length;

History API

// 添加历史记录（不跳转）
history.pushState({ page: 1 }, '标题', '/page1');

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

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

navigator对象

浏览器信息

// 用户代理
navigator.userAgent;

// 浏览器语言
navigator.language;

// 平台信息
navigator.platform;

// 在线状态
navigator.onLine;  // true/false

// Cookie启用
navigator.cookieEnabled;

常用功能检测

// 地理位置支持
navigator.geolocation ? '支持' : '不支持';

// 通知支持
navigator.notifications ? '支持' : '不支持';

// Service Worker支持
navigator.serviceWorker ? '支持' : '不支持';

地理位置API

navigator.geolocation.getCurrentPosition(
    (pos) => {
        console.log(pos.coords.latitude);   // 纬度
        console.log(pos.coords.longitude);  // 经度
    },
    (err) => {
        console.log(err.message);
    },
    { enableHighAccuracy: true }
);

窗口操作

打开新窗口

// 打开新窗口
const win = window.open('https://example.com', '_blank', 'width=800,height=600');

// 关闭窗口
win.close();

// 检查窗口是否关闭
win.closed;  // true/false

弹窗方法

// 警告框
window.alert('提示信息');

// 确认框
const result = window.confirm('确认删除？');  // true/false

// 输入框
const value = window.prompt('请输入：', '默认值');  // 输入值或null

定时器

setTimeout

// 单次定时器
const timer = setTimeout(() => {
    console.log('1秒后执行');
}, 1000);

// 清除定时器
clearTimeout(timer);

setInterval

// 重复定时器
const timer = setInterval(() => {
    console.log('每1秒执行');
}, 1000);

// 清除定时器
clearInterval(timer);

窗口事件

常用事件

// 页面加载完成
window.addEventListener('load', () => {});

// DOM加载完成
window.addEventListener('DOMContentLoaded', () => {});

// 窗口大小改变
window.addEventListener('resize', () => {});

// 滚动事件
window.addEventListener('scroll', () => {});

// 页面关闭前
window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = '确认离开？';
});

要点总结

1. location跳转：href可返回，replace不可返回
2. history API：pushState/replaceState实现SPA路由
3. URLSearchParams：便捷解析查询参数
4. navigator.userAgent：判断浏览器类型
5. beforeunload：页面离开前提示