什么是浏览器对象模型(BOM, Browser Object Model)

就叫飞六吧2024-10-27 22:08

什么是浏览器对象模型(BOM, Browser Object Model)

BOM 提供了与浏览器窗口交互的接口,使 JavaScript 可以与浏览器进行通信。以下是 BOM 的主要组成部分:

window 对象(最顶层对象)

javascript 复制代码

// 窗口操作
window.innerHeight  // 浏览器窗口的内部高度
window.innerWidth   // 浏览器窗口的内部宽度
window.open()       // 打开新窗口
window.close()      // 关闭当前窗口
window.moveTo()     // 移动当前窗口
window.resizeTo()   // 调整窗口大小

location 对象(URL 信息)

javascript 复制代码

// 当前页面的 URL 信息
location.href      // 完整的 URL
location.hostname  // 主机名
location.pathname  // 路径部分
location.search    // 查询字符串
location.hash      // 锚点

history 对象(浏览历史)

javascript 复制代码

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

navigator 对象(浏览器信息)

javascript 复制代码

navigator.userAgent    // 浏览器用户代理字符串
navigator.platform     // 操作系统平台
navigator.language     // 浏览器语言

screen 对象(屏幕信息)

javascript 复制代码

screen.width          // 屏幕宽度
screen.height         // 屏幕高度
screen.availWidth     // 可用宽度
screen.availHeight    // 可用高度

document 对象(虽然是 DOM 的一部分,但也是 BOM 的一部分)

javascript 复制代码

document.title        // 文档标题
document.URL         // 文档的完整 URL

BOM 与 DOM 的主要区别:

DOM: 文档对象模型,处理网页内容
BOM: 浏览器对象模型,处理浏览器窗口和框架

实际应用示例:

javascript 复制代码

// 检测浏览器类型和版本
function getBrowser() {
    const ua = navigator.userAgent;
    if (ua.includes('Chrome')) {
        return 'Chrome';
    } else if (ua.includes('Firefox')) {
        return 'Firefox';
    } else if (ua.includes('Safari')) {
        return 'Safari';
    }
    return 'Unknown';
}

// 页面跳转
function redirect(url) {
    location.href = url;
}

// 调整窗口大小
function resizeWindow(width, height) {
    window.resizeTo(width, height);
}

// 获取URL参数
function getQueryParam(param) {
    const urlParams = new URLSearchParams(location.search);
    return urlParams.get(param);
}