文章目录一、BOM 概述什么是浏览器对象模型1.1 BOM 的定义与作用1.2 BOM 的核心对象结构二、window 对象BOM 的核心2.1 窗口属性获取窗口尺寸与位置2.1.1 窗口尺寸属性2.1.2 调整窗口尺寸与位置2.2 全局作用域window 与全局变量的关系三、location 对象URL 操作的核心3.1 URL 的结构与 location 属性3.2 操作 URL 的方法四、navigator 对象浏览器信息探测器4.1 常用属性浏览器与系统信息4.2 扩展功能geolocation 与设备位置4.2.1 核心方法4.2.2 位置信息结构五、screen 对象屏幕信息接口5.1 常用屏幕属性5.2 实战场景自适应屏幕尺寸一、BOM 概述什么是浏览器对象模型1.1 BOM 的定义与作用BOMBrowser Object Model浏览器对象模型是 JavaScript 与浏览器窗口交互的接口它提供了一系列对象用于操作浏览器的窗口、导航、历史记录、屏幕信息等而不直接涉及网页内容。与 DOM 不同DOM 有 W3C 标准规范BOM 长期缺乏统一标准直到 HTML5 才对其核心部分进行了规范。但由于浏览器厂商的实践共识形成了一套事实上的标准使得 BOM API 在主流浏览器中基本兼容。BOM 的核心作用包括控制浏览器窗口打开、关闭、调整大小操作浏览器导航与历史记录获取浏览器及设备信息如版本、屏幕尺寸管理定时器与弹窗本地数据存储localStorage/sessionStorage监听浏览器事件如窗口大小变化、滚动1.2 BOM 的核心对象结构BOM 以window对象为核心所有其他对象都是window的属性。其层次结构如下window ├─ documentDOM 根节点属于 BOM 与 DOM 的交叉点 ├─ locationURL 相关信息与操作 ├─ navigator浏览器信息 ├─ screen屏幕信息 ├─ history浏览历史 ├─ localStorage本地存储 ├─ sessionStorage会话存储 └─ 方法/属性如定时器、弹窗、窗口大小等注意window是全局对象在浏览器中所有全局变量和函数都会成为window的属性。例如varglobalVar我是全局变量;console.log(window.globalVar);// 输出我是全局变量functionglobalFunc(){return我是全局函数;}console.log(window.globalFunc());// 输出我是全局函数二、window 对象BOM 的核心window对象是 BOM 的顶层对象代表浏览器的一个窗口。它既是 JavaScript 访问浏览器窗口的接口也是 ECMAScript 的全局对象。2.1 窗口属性获取窗口尺寸与位置window提供了一系列属性用于获取窗口的尺寸和位置在响应式布局和动态调整窗口时非常实用。2.1.1 窗口尺寸属性属性说明兼容性innerWidth窗口内容区宽度包含滚动条单位像素所有浏览器innerHeight窗口内容区高度包含滚动条所有浏览器outerWidth整个浏览器窗口宽度包含边框所有浏览器outerHeight整个浏览器窗口高度包含边框所有浏览器screenLeft窗口左边缘到屏幕左边缘的距离IE/ChromescreenTop窗口上边缘到屏幕上边缘的距离IE/ChromescreenX同 screenLeftFirefox 等浏览器Firefox/SafariscreenY同 screenTopFirefox 等浏览器Firefox/Safari代码示例获取窗口尺寸// 获取窗口内容区尺寸常用console.log(内容区宽度,window.innerWidth);console.log(内容区高度,window.innerHeight);// 获取浏览器窗口整体尺寸console.log(窗口整体宽度,window.outerWidth);console.log(窗口整体高度,window.outerHeight);// 获取窗口位置兼容写法constleftwindow.screenLeft||window.screenX;consttopwindow.screenTop||window.screenY;console.log(窗口位置左上角坐标 (${left},${top}));2.1.2 调整窗口尺寸与位置window提供了方法用于主动调整窗口的大小和位置注意浏览器可能限制对非脚本打开的窗口的操作resizeTo(width, height)将窗口调整为指定宽高resizeBy(widthDelta, heightDelta)相对当前尺寸调整宽高正值增大负值减小moveTo(x, y)将窗口移动到屏幕指定坐标moveBy(xDelta, yDelta)相对当前位置移动窗口代码示例控制窗口尺寸与位置// 打开一个新窗口后续操作需基于此窗口避免浏览器限制constnewWindowwindow.open(,_blank,width300,height200);// 2秒后调整窗口大小为500x400setTimeout((){newWindow.resizeTo(500,400);},2000);// 4秒后相对当前位置向右移动200px向下移动100pxsetTimeout((){newWindow.moveBy(200,100);},4000);// 6秒后关闭窗口setTimeout((){newWindow.close();},6000);2.2 全局作用域window 与全局变量的关系在浏览器中所有全局变量和函数都会自动成为window对象的属性。例如// 声明全局变量varusernameBOM;console.log(window.username);// 输出BOM// 声明全局函数functiongreet(){returnHello BOM;}console.log(window.greet());// 输出Hello BOM// 直接赋值给 window 的属性也是全局变量window.age30;console.log(age);// 输出30注意使用let/const声明的全局变量不会成为window的属性块级作用域特性letemailtestexample.com;console.log(window.email);// 输出undefined三、location 对象URL 操作的核心location对象既是window的属性也是document的属性window.location与document.location等价用于处理当前页面的 URL 信息并提供方法修改 URL。3.1 URL 的结构与 location 属性一个完整的 URL 结构如下protocol://host:port/pathname?search#hashlocation对象的属性对应 URL 的各部分属性说明示例URL: https://example.com:8080/path?nametest#tophref完整 URL“https://example.com:8080/path?nametest#top”protocol协议包含冒号“https:”host主机名 端口若端口为默认则省略“example.com:8080”hostname主机名不含端口“example.com”port端口号默认端口为空字符串“8080”pathname路径部分以斜杠开头“/path”search查询字符串以问号开头“?nametest”hash哈希值以井号开头用于页面内锚点“#top”origin协议 主机名 端口只读“https://example.com:8080”代码示例获取 URL 各部分信息// 假设当前 URL 为https://blog.example.com:8080/js/bom.html?version1.0#chapter1console.log(完整 URL,location.href);// 输出https://blog.example.com:8080/js/bom.html?version1.0#chapter1console.log(协议,location.protocol);// 输出https:console.log(主机名端口,location.host);// 输出blog.example.com:8080console.log(路径,location.pathname);// 输出/js/bom.htmlconsole.log(查询字符串,location.search);// 输出?version1.0console.log(哈希,location.hash);// 输出#chapter1console.log(源地址,location.origin);// 输出https://blog.example.com:80803.2 操作 URL 的方法location对象提供了修改 URL 的方法常用于页面跳转或刷新方法说明示例assign(url)跳转到指定 URL会留下历史记录可通过 back() 返回location.assign(https://example.com)replace(url)跳转到指定 URL不会留下历史记录无法通过 back() 返回原页面location.replace(https://example.com)reload(force)刷新当前页面。force 为 true 时强制从服务器加载否则可能使用缓存location.reload(true)toString()返回完整 URL等价于hrefconsole.log(location.toString())代码示例URL 操作对比// 1. 使用 assign 跳转有历史记录document.getElementById(btnAssign).addEventListener(click,(){location.assign(https://example.com);});// 2. 使用 replace 跳转无历史记录document.getElementById(btnReplace).addEventListener(click,(){location.replace(https://example.com);});// 3. 刷新页面document.getElementById(btnReload).addEventListener(click,(){// 强制从服务器刷新忽略缓存location.reload(true);});// 4. 直接修改 href 跳转等价于 assigndocument.getElementById(btnHref).addEventListener(click,(){location.hrefhttps://example.com;});注意修改location的任何属性如href、search、hash都会触发页面跳转hash除外仅滚动到锚点// 修改哈希值仅滚动到页面内 id 为 section2 的元素不刷新页面location.hash#section2;// 修改查询字符串会触发页面刷新location.search?page2size10;四、navigator 对象浏览器信息探测器navigator对象提供了浏览器的相关信息如浏览器名称、版本、操作系统等。由于历史原因其属性在不同浏览器中可能存在差异不建议用于精确的浏览器检测推荐特性检测。4.1 常用属性浏览器与系统信息属性说明示例值userAgent浏览器用户代理字符串包含版本等信息“Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/112.0.0.0 Safari/537.36”platform浏览器运行的操作系统平台“Win32”、“MacIntel”、“Linux x86_64”language浏览器默认语言字符串“zh-CN”、“en-US”languages浏览器支持的所有语言数组[“zh-CN”, “zh”, “en”]appName浏览器名称兼容性差多为 “Netscape”“Netscape”appVersion浏览器版本信息“5.0 (Windows NT 10.0; Win64; x64) …”onLine浏览器是否联网布尔值true / false代码示例获取浏览器信息console.log(用户代理字符串,navigator.userAgent);console.log(操作系统平台,navigator.platform);console.log(默认语言,navigator.language);console.log(支持的语言,navigator.languages);console.log(是否联网,navigator.onLine);浏览器检测的局限性userAgent可被修改且不同浏览器可能使用相似的字符串如 Chrome 和 Edge 均包含 “Chrome”。现代开发更推荐特性检测// 不推荐通过 userAgent 检测浏览器if(navigator.userAgent.includes(Chrome)){console.log(可能是 Chrome 浏览器);}// 推荐特性检测例如检测是否支持 localStorageif(typeofwindow.localStorage!undefined){console.log(支持 localStorage);}else{console.log(不支持 localStorage);}4.2 扩展功能geolocation 与设备位置navigator.geolocation是 HTML5 新增的 API用于获取用户地理位置需用户授权属于 BOM 的扩展功能。4.2.1 核心方法getCurrentPosition(success, error, options)获取当前位置success成功回调参数为包含位置信息的对象error失败回调参数为错误对象options配置项如超时时间、精度要求watchPosition(success, error, options)持续监听位置变化返回监听器 IDclearWatch(id)停止监听位置变化代码示例获取用户地理位置if(geolocationinnavigator){// 配置项超时30秒最多等待10秒获取位置高精度模式constoptions{timeout:30000,maximumAge:0,// 不使用缓存位置enableHighAccuracy:true// 高精度可能更耗电};// 获取当前位置navigator.geolocation.getCurrentPosition((position){// 成功回调constcoordsposition.coords;console.log(纬度,coords.latitude);console.log(经度,coords.longitude);console.log(海拔,coords.altitude||未知);console.log(精度米,coords.accuracy);},(error){// 失败回调switch(error.code){case1:console.log(用户拒绝授权);break;case2:console.log(无法获取位置信息);break;case3:console.log(获取位置超时);break;}},options);}else{console.log(浏览器不支持地理位置);}4.2.2 位置信息结构success回调的参数包含以下核心属性{coords:{latitude:39.9042,// 纬度度longitude:116.4074,// 经度度altitude:43.5,// 海拔米可能为nullaccuracy:100,// 位置精度米altitudeAccuracy:20,// 海拔精度米可能为nullheading:30,// 方向度0表示正北可能为nullspeed:5// 速度米/秒可能为null},timestamp:1620000000000// 获取时间戳}五、screen 对象屏幕信息接口screen对象提供了用户设备屏幕的信息常用于调整窗口大小以适应屏幕或优化移动端显示。5.1 常用屏幕属性属性说明示例值width屏幕宽度像素1920height屏幕高度像素1080availWidth可用宽度屏幕宽度 - 系统任务栏等1920availHeight可用高度屏幕高度 - 系统任务栏等1040colorDepth屏幕颜色深度位/像素24pixelDepth屏幕像素深度同 colorDepth24orientation屏幕方向返回 ScreenOrientation 对象详见下文代码示例获取屏幕信息console.log(屏幕宽度,screen.width);// 输出1920console.log(屏幕高度,screen.height);// 输出1080console.log(可用宽度,screen.availWidth);// 输出1920console.log(可用高度,screen.availHeight);// 输出1040假设任务栏高度40pxconsole.log(颜色深度,screen.colorDepth);// 输出24// 屏幕方向横屏/竖屏if(screen.orientation){console.log(当前方向,screen.orientation.type);// 输出landscape-primary横屏或 portrait-primary竖屏}5.2 实战场景自适应屏幕尺寸利用screen信息可实现窗口自适应例如打开一个占满可用屏幕的窗口// 打开一个占满可用屏幕的新窗口functionopenFullScreenWindow(){consturlhttps://example.com;constwidthscreen.availWidth;constheightscreen.availHeight;// 计算窗口位置左上角对齐屏幕constleft0;consttop0;window.open(url,_blank,width${width},height${height},left${left},top${top});}// 按钮点击事件document.getElementById(openFullBtn).addEventListener(click,openFullScreenWindow);
