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

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

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

  1. window 对象(最顶层对象)
javascript 复制代码
// 窗口操作
window.innerHeight  // 浏览器窗口的内部高度
window.innerWidth   // 浏览器窗口的内部宽度
window.open()       // 打开新窗口
window.close()      // 关闭当前窗口
window.moveTo()     // 移动当前窗口
window.resizeTo()   // 调整窗口大小
  1. location 对象(URL 信息)
javascript 复制代码
// 当前页面的 URL 信息
location.href      // 完整的 URL
location.hostname  // 主机名
location.pathname  // 路径部分
location.search    // 查询字符串
location.hash      // 锚点
  1. history 对象(浏览历史)
javascript 复制代码
history.back()     // 后退
history.forward()  // 前进
history.go(-2)     // 后退两页
  1. navigator 对象(浏览器信息)
javascript 复制代码
navigator.userAgent    // 浏览器用户代理字符串
navigator.platform     // 操作系统平台
navigator.language     // 浏览器语言
  1. screen 对象(屏幕信息)
javascript 复制代码
screen.width          // 屏幕宽度
screen.height         // 屏幕高度
screen.availWidth     // 可用宽度
screen.availHeight    // 可用高度
  1. 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);
}
相关推荐
songroom21 小时前
Rust : 关于Deref
开发语言·后端·rust
qq_4017004121 小时前
QT子线程与GUI线程安全交互
开发语言·qt
高-老师21 小时前
R语言生物群落(生态)数据统计分析与绘图实践技术应用
开发语言·r语言·生物群落
Joy-鬼魅21 小时前
怎么生成qt的pro文件
开发语言·qt
Rysxt_1 天前
Spring Boot 集成 Spring AI OpenAI Starter 教程
java·spring boot·后端·ai
青云交1 天前
Java 大视界 -- Java 大数据在智能家居场景联动与用户行为模式挖掘中的应用
java·大数据·智能家居·边缘计算·户型适配·行为挖掘·场景联动
AAA修煤气灶刘哥1 天前
ES 高级玩法大揭秘:从算分骚操作到深度分页踩坑,后端 er 速进!
java·后端·elasticsearch
江团1io01 天前
深入解析MVCC:多版本并发控制的原理与实现
java·经验分享·mysql
树码小子1 天前
Java网络编程:(socket API编程:UDP协议的 socket API -- 回显程序的服务器端程序的编写)
java·网络·udp
君宝1 天前
Linux ALSA架构:PCM_OPEN流程 (二)
java·linux·c++