什么是浏览器对象模型(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);
}
相关推荐
Han.miracle4 分钟前
数据结构二叉树——层序遍历&& 扩展二叉树的左视图
java·数据结构·算法·leetcode
沐知全栈开发7 分钟前
HTML 颜色名
开发语言
Orange_sparkle14 分钟前
若依使用基本步骤
java·vue
property-21 分钟前
C++中#define和const的区别
开发语言·c++
kevinfkq22 分钟前
Java-idea编辑器中Jar方式打包启动
java·intellij-idea·jar
学编程的小虎37 分钟前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
€81144 分钟前
Java入门级教程23——配置Nginx服务器、轻量级HTTP服务开发、前后端分离实现完整应用系统
java·开发语言·仓颉·生成验证码
yunson_Liu1 小时前
编写Python脚本在域名过期10天内将域名信息发送到钉钉
开发语言·python·钉钉
星秀日1 小时前
框架--SpringMVC
java·开发语言·servlet
小蒜学长1 小时前
springboot餐厅信息管理系统设计(代码+数据库+LW)
java·数据库·spring boot·后端