【Java Web学习 | 第11篇】JavaScript(5)BOM

【Java Web学习 | 第11篇】JavaScript(5) - BOM浏览器对象模型2026最新版恭喜你完成对象部分现在进入BOMBrowser Object Model浏览器对象模型这是 JavaScript 与浏览器交互的核心桥梁。BOM 让 JS 可以操作浏览器窗口、历史记录、地址栏、定时器、弹窗等功能。在 Java Web 项目中BOM 常用于页面跳转与刷新定时刷新数据轮询后端 API确认/提示弹窗获取浏览器信息设备适配localStorage/sessionStorage前端缓存注意BOM没有统一标准但主流浏览器Chrome、Edge、Firefox 等实现高度一致。1. BOM 核心层级结构window全局对象所有 BOM 的根 ├── location地址栏 ├── history浏览历史 ├── navigator浏览器信息 ├── screen屏幕信息 ├── documentDOM 的入口已学 ├── console控制台 ├── alert/confirm/prompt弹窗 ├── setTimeout/setInterval定时器 └── localStorage/sessionStorage本地存储2. window 对象全局对象// window 可以省略不写window.alert(欢迎学习 Java Web);alert(欢迎学习 Java Web);// 直接写即可// 常用属性console.log(window.innerWidth);// 浏览器窗口宽度不含滚动条console.log(window.innerHeight);// 浏览器窗口高度// 打开新窗口functionopenNewPage(){window.open(https://www.baidu.com,_blank);}3. location 对象地址栏操作// 当前页面完整 URLconsole.log(location.href);// 常用属性console.log(location.protocol);// https:console.log(location.host);// example.com:8080console.log(location.pathname);// /user/listconsole.log(location.search);// ?id1001namezhangsan// 重要方法location.hrefhttps://www.example.com;// 跳转页面推荐location.assign(https://www.example.com);// 同上location.replace(https://www.example.com);// 跳转且不记录历史无法后退// 刷新页面location.reload();// 普通刷新location.reload(true);// 强制从服务器重新加载清除缓存4. history 对象浏览器历史记录// 后退history.back();// 等同于点击浏览器后退按钮history.go(-1);// 前进history.forward();history.go(1);// 向历史记录中添加一条常用于 SPA 单页应用history.pushState({page:2},标题,/user/list);// 替换当前历史记录history.replaceState({page:1},标题,/dashboard);5. navigator 对象浏览器与设备信息console.log(navigator.userAgent);// 浏览器完整 UA 字符串// 常用判断2026 仍实用constisMobile/Mobi|Android|iPhone/i.test(navigator.userAgent);console.log(是否移动端,isMobile);console.log(navigator.language);// zh-CNconsole.log(navigator.onLine);// 是否联网6. 定时器Timer—— Java Web 中非常重要// 1. setTimeout一次性定时器consttimer1setTimeout((){console.log(3秒后执行);// 可以在这里调用后端 API 刷新数据},3000);// 取消定时器clearTimeout(timer1);// 2. setInterval重复定时器常用于轮询letcount0;constintervalIdsetInterval((){count;console.log(第${count}次执行);// 实际项目中常用于每30秒刷新一次用户列表if(count10){clearInterval(intervalId);// 停止}},1000);实战建议在生产环境中轮询推荐使用setTimeout递归实现避免setInterval累积延迟。7. 弹窗方法谨慎使用alert(普通提示框);// 只确定按钮constresultconfirm(确认删除此用户吗);// 确认框if(result){// 执行删除操作调用后端 APIconsole.log(用户确认删除);}constnameprompt(请输入你的姓名,重阳);// 输入框if(name){console.log(输入的内容,name);}注意现代项目中alert/confirm/prompt使用较少通常用自定义模态框Modal替代UI 更好看。8. 本地存储Storage—— 前端数据持久化// 1. localStorage永久存储关闭浏览器仍存在localStorage.setItem(token,eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...);localStorage.setItem(user,JSON.stringify({id:1001,username:chongyang}));// 获取consttokenlocalStorage.getItem(token);constuserJSON.parse(localStorage.getItem(user)||{});// 删除localStorage.removeItem(token);localStorage.clear();// 清空所有// 2. sessionStorage会话存储关闭标签页即消失sessionStorage.setItem(tempData,临时数据);Java Web 实战登录成功后把 JWT token 存入 localStorage后续请求自动带上 Authorization 头。9. 完整综合示例BOM 实战!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleBOM 综合示例 - Java Web/title/headbodyh1Java Web BOM 演示/h1buttononclickrefreshPage()刷新页面/buttonbuttononclickgoToBackend()跳转到后端首页/buttonbuttononclickstartPolling()开始轮询模拟刷新数据/buttonbuttononclicksaveToken()保存登录Token/buttondividlog/divscriptconstlogdocument.getElementById(log);functionlogMsg(msg){log.innerHTMLp${newDate().toLocaleTimeString()}-${msg}/p;}window.refreshPage()location.reload();window.goToBackend()location.href/api/index;// 假设后端路径letpollCount0;letpollTimernull;window.startPolling(){if(pollTimer)clearInterval(pollTimer);pollTimersetInterval((){pollCount;logMsg(第${pollCount}次轮询后端数据...);// 实际项目中这里会调用 fetch(/api/users)},3000);};window.saveToken(){localStorage.setItem(jwt_token,fake-jwt-token-2026);logMsg(Token 已保存到 localStorage);};// 页面加载时输出 BOM 信息window.onload(){logMsg(浏览器窗口大小:${window.innerWidth}×${window.innerHeight});logMsg(当前页面路径:${location.pathname});};/script/body/html10. 小练习建议立即完成写一个按钮点击后弹出confirm确认框确认后跳转到百度首页。使用setInterval每 2 秒在页面上显示当前时间实时更新。实现“保存用户偏好”功能把主题颜色存入 localStorage页面刷新后自动应用。写一个函数checkLogin()如果 localStorage 中没有 token则 alert 提示用户登录。下一篇文章预告《【Java Web学习 | 第12篇】JavaScript(6) - 异步编程Promise async/await与 Fetch API》我们将学习现代异步处理方式并使用fetch真正调用 Spring Boot 后端 REST 接口实现登录、获取用户列表等功能。本篇核心总结BOM 以window为根跳转用location.href定时任务用setTimeout/setInterval数据持久化用localStorage实际项目中弹窗尽量用自定义 UI 替代有问题随时问想要完整登录态管理示例token localStorage需要轮询刷新数据完整代码或直接进入异步 Fetch篇回复“给我练习答案”或“下一篇 Fetch”我立刻继续BOM 是浏览器与 JS 交互的“控制中心”掌握后你已经可以控制整个浏览器行为。继续加油下一章我们就要真正和 Spring Boot 后端“握手”了