全Ajax驱动站点：如何拦截浏览器返回按钮并调用Ajax函数？

我来帮你搞定这个问题！你之前尝试的两种方案都没达到预期效果，主要是因为没用到HTML5标准的History API——这才是现代单页应用处理浏览器前进/后退的正确姿势。先帮你分析下之前方案的问题：

• 第一个基于hashchange和鼠标位置的方案：依赖鼠标是否在页面内的判断完全不可靠（比如用户用键盘快捷键后退就失效），而且hashchange是在URL变化后触发的，没法阻止浏览器的默认跳转行为。
• 第二个onbeforeunload的方案：这个事件只能用来提示用户“离开会丢失数据”，根本无法真正拦截后退操作；另外performance.navigation.type已经被现代浏览器弃用，所以你的console.log也不会触发。

下面给你一套可行的解决方案，完全适配Chrome 75和Firefox 67：

核心思路 #

利用history.pushState维护自己的历史记录栈，监听popstate事件（用户点击前进/后退时触发），在事件回调里调用你的ShowPage函数加载对应页面，从而完全接管浏览器的导航行为。

具体实现步骤 #

1. 初始化历史记录 #

页面加载完成后，先把初始页面的状态存入历史栈：

document.addEventListener('DOMContentLoaded', function() {
    // 假设初始页面的ID是1，你可以根据实际情况修改
    history.pushState({pageId: 1}, '', window.location.href);
});

2. 更新ShowPage函数，添加历史记录 #

每次通过Ajax加载新页面时，都用pushState添加一条新的历史记录，这样浏览器的历史栈里的条目都是我们自己维护的：

function ShowPage(pageId) {
    // 你的原有Ajax加载逻辑（这里假设已经能正常工作）
    // 比如：
    // fetch(`/api/page/${pageId}`)
    //   .then(res => res.text())
    //   .then(html => document.getElementById('content').innerHTML = html);

    // 添加新的历史记录，可选修改URL（这里用hash示例，也可以用pathname）
    const newUrl = `#page${pageId}`;
    history.pushState({pageId: pageId}, '', newUrl);
}

3. 监听popstate事件，拦截后退行为 #

当用户点击浏览器的前进/后退按钮时，popstate事件会触发，我们在回调里加载对应的页面：

window.addEventListener('popstate', function(event) {
    // 只有当我们之前保存了页面状态时，才处理导航
    if (event.state && event.state.pageId) {
        // 调用你的ShowPage加载对应页面
        ShowPage(event.state.pageId);
    }
});

关键说明 #

• 这个方案完全阻止了浏览器的默认跳转行为，因为历史栈里的所有条目都是我们通过pushState添加的，用户点击后退时，浏览器只会触发popstate事件，不会跳转到外部站点。
• 如果用户是从其他网站进入你的站点，第一次点击后退还是会回到原网站——这是正常的，因为那是浏览器历史栈里的真实外部条目，我们只能拦截自己添加的历史记录。
• 你可以根据需求决定是否修改URL（比如用hash或者pathname），修改URL能让用户看到当前页面状态，也方便书签保存。

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