菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

Java

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

likuolei

【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);  // 浏览器窗口高度

// 打开新窗口
function openNewPage() {
    window.open("https://www.baidu.com", "_blank");
}

3. location 对象（地址栏操作）

// 当前页面完整 URL
console.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 仍实用）
const isMobile = /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（一次性定时器）
const timer1 = setTimeout(() => {
    console.log("3秒后执行");
    // 可以在这里调用后端 API 刷新数据
}, 3000);

// 取消定时器
clearTimeout(timer1);

// 2. setInterval（重复定时器，常用于轮询）
let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log(`第 ${count} 次执行`);

    // 实际项目中常用于：每30秒刷新一次用户列表
    if (count >= 10) {
        clearInterval(intervalId);   // 停止
    }
}, 1000);

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

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

alert("普通提示框");                    // 只确定按钮

const result = confirm("确认删除此用户吗？");   // 确认框
if (result) {
    // 执行删除操作，调用后端 API
    console.log("用户确认删除");
}

const name = 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" }));

// 获取
const token = localStorage.getItem("token");
const user = JSON.parse(localStorage.getItem("user") || "{}");

// 删除
localStorage.removeItem("token");
localStorage.clear();   // 清空所有

// 2. sessionStorage（会话存储，关闭标签页即消失）
sessionStorage.setItem("tempData", "临时数据");

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>BOM 综合示例 - Java Web</title>
</head>
<body>
    <h1>Java Web BOM 演示</h1>
    <button onclick="refreshPage()">刷新页面</button>
    <button onclick="goToBackend()">跳转到后端首页</button>
    <button onclick="startPolling()">开始轮询（模拟刷新数据）</button>
    <button onclick="saveToken()">保存登录Token</button>

    <div id="log"></div>

    <script>
        const log = document.getElementById('log');

        function logMsg(msg) {
            log.innerHTML += `<p>${new Date().toLocaleTimeString()} - ${msg}</p>`;
        }

        window.refreshPage = () => location.reload();
        window.goToBackend = () => location.href = "/api/index";   // 假设后端路径

        let pollCount = 0;
        let pollTimer = 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>

10. 小练习（建议立即完成）

  1. 写一个按钮，点击后弹出 confirm 确认框，确认后跳转到百度首页。
  2. 使用 setInterval 每 2 秒在页面上显示当前时间（实时更新）。
  3. 实现“保存用户偏好”功能：把主题颜色存入 localStorage，页面刷新后自动应用。
  4. 写一个函数 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 后端“握手”了！🚀

网站 http://yingjuxia.com
文章已创建 5288

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部