JS BOM API

网站

Window | MDN

Location | MDN

History | MDN

引入

DOM 操作的是页面内容，而 BOM 操作的是浏览器本身。

弹窗、页面跳转、浏览器历史记录、获取浏览器信息，这些功能都是通过 BOM 实现的。

正文

定义

定义

BOM（Browser Object Model）是浏览器提供的对象模型，让 JS 可以操作浏览器窗口、地址栏、历史记录等信息。

BOM 的核心对象是 window，它代表浏览器窗口，同时也是 JS 的全局对象。

window 对象

window 是浏览器的全局对象。在全局作用域中定义的变量和函数，都挂在 window 上。

var name = "张三";
 
console.log(window.name);

console.log() 实际上也是 window.console.log()，只是通常省略 window.。

弹窗方法

window 提供了三种简单的弹窗方法。

window.alert()

弹出一个提示框，只有一个”确定”按钮。

window.alert("操作成功");

通常简写为 alert("操作成功")。

window.confirm()

弹出一个确认框，有”确定”和”取消”按钮，返回 true 或 false。

const isDelete = window.confirm("确定要删除吗？");
 
if (isDelete) {
  console.log("已删除");
} else {
  console.log("取消删除");
}

window.prompt()

弹出一个输入框，用户输入后返回输入的文本。点取消返回 null。

const userName = window.prompt("请输入你的名字：");
 
console.log(userName);

方法	作用	返回值
alert(message)	提示框	undefined
confirm(message)	确认框	true / false
prompt(message)	输入框	用户输入的文字 / null

这三种弹窗在生产环境中很少使用，因为样式不可定制。主要用于调试或简单提示。

location 对象

location 保存当前页面的 URL 信息，也可以用来跳转页面。

console.log(location.href);

常用属性和方法

属性/方法	作用
location.href	获取或设置当前页面完整 URL
location.hostname	获取域名
location.pathname	获取路径部分
location.search	获取查询参数（? 后面的部分）
location.hash	获取锚点（# 后面的部分）
location.reload()	刷新当前页面
location.replace(url)	跳转到新 URL，不保留历史记录

页面跳转

location.href = "https://example.com";

等同于用户点击了一个链接，会在浏览器历史记录中留下记录。

location.replace("https://example.com");

跳转但不会留下历史记录，用户无法通过”后退”回到之前的页面。

刷新页面

location.reload();

等同于用户按了 F5。

获取查询参数

URL 是 https://example.com/search?q=js&page=1 时：

console.log(location.search);

输出 "?q=js&page=1"。

可以用 URLSearchParams 来解析：

const params = new URLSearchParams(location.search);
 
console.log(params.get("q"));
console.log(params.get("page"));

history 对象

history 保存浏览器的访问历史记录。

方法	作用
history.back()	后退一页（等同于点击浏览器的后退按钮）
history.forward()	前进一页
history.go(n)	前进或后退 n 页（负数后退，正数前进）
history.pushState(state, title, url)	添加一条历史记录

前进后退

<button id="backBtn">后退</button>
<button id="forwardBtn">前进</button>

const backBtn = document.querySelector("#backBtn");
const forwardBtn = document.querySelector("#forwardBtn");
 
backBtn.addEventListener("click", function () {
  history.back();
});
 
forwardBtn.addEventListener("click", function () {
  history.forward();
});

pushState() 实现无刷新切换

pushState() 可以修改地址栏的 URL，但不刷新页面。这是单页应用（SPA）的基础。

history.pushState({ page: 2 }, "", "/page2");

地址栏变成 /page2，但页面不会重新加载。

监听 popstate 事件可以捕获用户点击”后退”或”前进”。

window.addEventListener("popstate", function (event) {
  console.log("历史记录变化：", event.state);
});

navigator 对象

navigator 保存浏览器的相关信息。

属性	作用
navigator.userAgent	浏览器标识字符串
navigator.language	浏览器语言
navigator.onLine	是否在线
navigator.platform	操作系统平台

console.log(navigator.userAgent);
console.log(navigator.language);
console.log(navigator.onLine);

userAgent 可以用来判断用户使用的是什么浏览器，但由于可以被伪造，不推荐用它来做功能检测。

window.open() 和 window.close()

window.open() 打开新窗口，window.close() 关闭当前窗口。

window.open("https://example.com", "_blank");

第一个参数是 URL，第二个参数是窗口名称，"_blank" 表示新窗口打开。

window.close();

只能关闭 JS 打开的窗口，不能关闭用户手动打开的标签页。

例子

跳转到登录页

if (!isLoggedIn) {
  location.href = "/login";
}

确认删除

<button id="deleteBtn">删除</button>

const deleteBtn = document.querySelector("#deleteBtn");
 
deleteBtn.addEventListener("click", function () {
  const isSure = confirm("确定要删除吗？此操作不可恢复。");
  if (isSure) {
    console.log("执行删除");
  }
});

获取当前 URL 参数

const params = new URLSearchParams(location.search);
const keyword = params.get("q");
 
console.log("搜索关键词：" + keyword);

常见写法

写法	作用
location.href = "url"	跳转到指定页面
location.reload()	刷新页面
history.back()	后退一页
history.pushState(state, "", url)	无刷新修改 URL
navigator.userAgent	获取浏览器标识
confirm("提示")	弹出确认框
window.open(url, "_blank")	新窗口打开链接

特点

• window 是浏览器的全局对象，也是 JS 的全局作用域
• alert()、confirm()、prompt() 是浏览器内置弹窗
• location 用于获取 URL 信息和页面跳转
• history 用于控制浏览器的前进和后退
• pushState() 可以无刷新修改 URL，是单页应用的基础
• navigator 用于获取浏览器和操作系统的信息
• window.open() 可以打开新窗口

注意事项

• alert() 和 confirm() 会阻塞代码执行，弹窗关闭前后续代码不会运行
• 现代浏览器可能会拦截 window.open()，需要放在用户点击事件的回调中调用
• location.href 跳转会在历史记录中留痕，location.replace() 不会
• pushState() 不能跨域修改 URL
• navigator.userAgent 可以被用户修改，不应该作为判断依据
• window.close() 只能关闭 JS 创建的窗口

理解

可以把 BOM 理解成”浏览器的遥控器”。

DOM 是遥控器上的”换台”按钮，控制的是页面内容。

BOM 是遥控器上的”开关机”、“调音量”按钮，控制的是浏览器本身。

location 是地址栏，history 是前进后退按钮，navigator 是电视机的型号信息。

我理解 BOM 的重点是：DOM 操作页面内容，BOM 操作浏览器本身。

引出

了解了 BOM API 之后，可以继续学习 JS 定时器，掌握定时和延迟执行的能力。

也可以学习 JS 本地存储，了解如何在浏览器中保存数据。