使用pushState修改地址后点击浏览器回退如何撤销display:none设置？

可行解决方案 #

不需要修改body标签，通过监听浏览器历史操作的popstate事件即可解决，有两种实现方式可选：

方案1：回退时自动刷新页面（满足你提的刷新即可生效的需求）

直接在现有<script>标签内追加以下代码：

window.addEventListener('popstate', function () {
    // 检测到浏览器前进/回退操作时直接刷新，同步URL和页面状态
    location.reload();
});

优点是改动最小，不需要调整原有逻辑。

方案2：无刷新动态同步状态（性能更优）

通过统一的状态同步逻辑，自动匹配URL更新DOM显示，不用刷新页面：

// 封装统一的书籍展示状态同步方法
function syncBookState() {
    // 读取当前URL的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    // URL存在id参数时展示书籍信息，否则隐藏
    document.getElementById("book").style.display = urlParams.has('id') ? 'block' : 'none';
}

// 监听浏览器前进/回退事件，触发时同步状态
window.addEventListener('popstate', syncBookState);

// 页面首次加载时执行一次，保证初始状态和URL匹配
syncBookState();

原有close方法里手动设置display:none的逻辑可以直接替换成调用syncBookState()，后续所有状态变更都通过这个统一方法处理，避免逻辑分散。

额外注意事项 #

全局函数尽量不要命名为close，部分浏览器中window.close是内置方法，全局定义同名函数可能触发冲突，建议改名为closeBookInfo等自定义名称。

内容的提问来源于stack exchange，提问作者Riyuri