当前位置：首页 > news >正文

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

news 2026/7/26 4:23:37

【Java Web学习 | 第11篇】JavaScript(5) - BOM（浏览器对象模型）（2026最新版）

恭喜你完成对象部分！
现在进入BOM（Browser Object Model，浏览器对象模型），这是 JavaScript 与浏览器交互的核心桥梁。

BOM 让 JS 可以操作浏览器窗口、历史记录、地址栏、定时器、弹窗等功能。在 Java Web 项目中，BOM 常用于：

页面跳转与刷新
定时刷新数据（轮询后端 API）
确认/提示弹窗
获取浏览器信息（设备适配）
localStorage/sessionStorage（前端缓存）

注意：BOM没有统一标准，但主流浏览器（Chrome、Edge、Firefox 等）实现高度一致。

1. BOM 核心层级结构

window（全局对象，所有 BOM 的根） ├── location（地址栏） ├── history（浏览历史） ├── navigator（浏览器信息） ├── screen（屏幕信息） ├── document（DOM 的入口，已学） ├── 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:8080"console.log(location.pathname);// "/user/list"console.log(location.search);// "?id=1001&name=zhangsan"// 重要方法location.href="https://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-CN"console.log(navigator.onLine);// 是否联网

6. 定时器（Timer）—— Java Web 中非常重要！

// 1. setTimeout（一次性定时器）consttimer1=setTimeout(()=>{console.log("3秒后执行");// 可以在这里调用后端 API 刷新数据},3000);// 取消定时器clearTimeout(timer1);// 2. setInterval（重复定时器，常用于轮询）letcount=0;constintervalId=setInterval(()=>{count++;console.log(`第${count}次执行`);// 实际项目中常用于：每30秒刷新一次用户列表if(count>=10){clearInterval(intervalId);// 停止}},1000);

实战建议：在生产环境中，轮询推荐使用setTimeout递归实现，避免setInterval累积延迟。

7. 弹窗方法（谨慎使用）

alert("普通提示框");// 只确定按钮constresult=confirm("确认删除此用户吗？");// 确认框if(result){// 执行删除操作，调用后端 APIconsole.log("用户确认删除");}constname=prompt("请输入你的姓名：","重阳");// 输入框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"}));// 获取consttoken=localStorage.getItem("token");constuser=JSON.parse(localStorage.getItem("user")||"{}");// 删除localStorage.removeItem("token");localStorage.clear();// 清空所有// 2. sessionStorage（会话存储，关闭标签页即消失）sessionStorage.setItem("tempData","临时数据");

Java Web 实战：登录成功后把 JWT token 存入 localStorage，后续请求自动带上 Authorization 头。

9. 完整综合示例（BOM 实战）

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>BOM 综合示例 - Java Web</title></head><body><h1>Java Web BOM 演示</h1><buttononclick="refreshPage()">刷新页面</button><buttononclick="goToBackend()">跳转到后端首页</button><buttononclick="startPolling()">开始轮询（模拟刷新数据）</button><buttononclick="saveToken()">保存登录Token</button><divid="log"></div><script>constlog=document.getElementById('log');functionlogMsg(msg){log.innerHTML+=`<p>${newDate().toLocaleTimeString()}-${msg}</p>`;}window.refreshPage=()=>location.reload();window.goToBackend=()=>location.href="/api/index";// 假设后端路径letpollCount=0;letpollTimer=null;window.startPolling=()=>{if(pollTimer)clearInterval(pollTimer);pollTimer=setInterval(()=>{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></html>