什么是浏览器对象模型(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);
}
相关推荐
超浪的晨几秒前
Java List 集合详解:从基础到实战,掌握 Java 列表操作全貌
java·开发语言·后端·学习·个人开发
盛夏绽放2 分钟前
Excel导出实战:从入门到精通 - 构建专业级数据报表的完整指南
开发语言·javascript·excel·有问必答
超浪的晨5 分钟前
Java Set 集合详解:从基础语法到实战应用,彻底掌握去重与唯一性集合
java·开发语言·后端·学习·个人开发
workflower21 分钟前
活动图描述场景
开发语言·软件工程·需求分析·软件需求·敏捷流程
梦想的初衷~23 分钟前
基于现代R语言【Tidyverse、Tidymodel】的机器学习方法
开发语言·机器学习·r语言
liliangcsdn23 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
香蕉可乐荷包蛋26 分钟前
Python学习之路(十三)-常用函数的使用,及优化
开发语言·python·学习
惜.己34 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
Shimiy1 小时前
第六章 面向对象编程------进阶
java
大葱白菜1 小时前
Java Set 集合详解:从基础语法到实战应用,彻底掌握去重与唯一性集合
java·后端