什么是浏览器对象模型(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);
}
相关推荐
枯萎穿心攻击1 分钟前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
DKPT26 分钟前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
Eiceblue1 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
好奇的菜鸟2 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
m0_555762902 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
DuelCode3 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
优创学社23 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
猴哥源码3 小时前
基于Java+springboot 的车险理赔信息管理系统
java·spring boot