JavaScript中BOM对象history怎么用pushState和replaceState实现无刷新修改URL-js教程-PHP中文网

bom的history对象通过pushstate()和replacestate()实现无刷新url修改并维护历史记录，需配合popstate事件监听前进/后退操作；pushstate()添加新记录，replacestate()替换当前记录，二者均受同源限制且不触发页面跳转。

javascript中bom对象history怎么用pushstate和replacestate实现无刷新修改url

JavaScript中BOM的history对象提供了pushState()和replaceState()方法，可以在不重新加载页面的前提下修改浏览器地址栏的URL，并维护历史记录。它们不会触发页面跳转或刷新，但需配合popstate事件监听返回/前进操作，才能实现真正的“无刷新路由”效果。

pushState()：添加新历史记录项

pushState()向浏览器历史栈中插入一条新记录，用户点击后退按钮时会回到上一条状态。

语法：
history.pushState(state, title, url)

state：一个可选的、与该历史记录关联的任意 JavaScript 对象（会被序列化保存，但不显示在URL中），后续通过event.state获取；
title：目前大多数浏览器忽略该参数，可传空字符串""或null；
url：新的相对或绝对URL，必须同源（协议+域名+端口一致），否则抛错；

示例：

history.pushState({page: 'detail', id: 123}, '', '/product/123');

执行后地址栏变为/product/123，页面不刷新，且可通过history.back()或浏览器后退按钮回到前一页。

Java Linux版

Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。

下载

replaceState()：替换当前历史记录项

replaceState()不会新增历史条目，而是直接替换当前这一条记录。用户无法通过后退回到被替换前的状态。

语法与pushState()完全相同：
history.replaceState(state, title, url)

常用于更新URL但不希望增加历史深度，比如表单筛选条件变化、锚点滚动、深色模式切换等；
若仅想更新state对象而不改URL，可传入当前location.href；

示例：

// 更新当前页状态，URL变成 /search?q=js&sort=date
history.replaceState({q: 'js', sort: 'date'}, '', '/search?q=js&sort=date');

监听 URL 变化：popstate 事件必不可少

pushState()和replaceState()本身**不会触发**任何事件，也不会自动渲染新内容。要响应浏览器前进/后退操作，必须手动监听popstate事件：

window.addEventListener('popstate', function(event) {
  const state = event.state; // 获取 pushState/replaceState 传入的 state 对象
  if (state && state.page === 'detail') {
    loadProductDetail(state.id); // 自定义逻辑：加载对应内容
  }
});