Chrome中点击返回按钮时'popstate'事件仅触发一次问题

Chrome最新版本强化了历史栈操作的安全限制：当无用户主动交互（点击、输入等）时，连续触发返回操作会跳过popstate事件，直接跳转至历史栈的上一条目（即你的登录页）。以下是针对性的解决方法及代码修正：

核心解决思路 #

1. 同步应用状态与历史栈：每次应用内切换页面/状态时，主动调用pushState或replaceState更新历史栈，让每个返回操作都对应有效的历史条目，确保Chrome正常触发popstate。
2. 避免无交互的栈膨胀：处理popstate后用replaceState替换当前历史条目，而非新增，避免历史栈无限增长，同时符合Chrome的交互上下文要求。
3. 激活用户交互上下文：通过监听第一次用户交互，初始化历史栈标记，确保后续返回操作被Chrome识别为用户触发的合法操作。

修正后的代码示例 #

// 全局维护应用状态，与历史栈同步
const appState = { page_id: 1, user_id: 5, status: 'init' };

// 应用内状态切换时调用，主动更新历史栈
function updateAppHistory(newStatus) {
    appState.status = newStatus;
    history.pushState({ ...appState }, '', '');
}

// 处理返回按钮逻辑
function handleBack() {
    backOneStep(0);
    // 替换当前历史条目，避免栈膨胀
    history.replaceState({ ...appState }, '', '');
}

// 初始化历史栈
history.replaceState({ ...appState }, '', '');
// 绑定popstate事件
window.addEventListener('popstate', handleBack);

// 监听第一次用户交互，激活历史栈上下文
let hasUserInteracted = false;
window.addEventListener('click', () => {
    if (!hasUserInteracted) {
        hasUserInteracted = true;
        history.replaceState({ ...appState }, '', '');
    }
}, { once: true });

// 原有业务逻辑保持不变
function backOneStep(flg) {
    console.log('backOneStep:', idStatus);
    if (idStatus == -2) {
        return;
    }
    if (idStatus == -1) {
        toStart();
        return;
    }
    if (userId < 1) return;
    if (idStatus == 2) {
        closeOneTask();
        idStatus = 1;
        return;
    }
    if (idStatus == 3) {
        hideAttachFile();
        idStatus = 2;
        return;
    }
}

关键说明 #

• 每次应用内状态变更（比如从任务页回到列表页），都要调用updateAppHistory同步历史栈，让返回操作与应用状态一一对应。
• 用replaceState替代pushState处理返回后的历史栈，既避免栈无限增长，又符合Chrome对交互上下文的要求。
• 第一次用户交互后初始化历史栈，确保Chrome将后续的返回操作识别为用户触发的合法行为，不会跳过popstate事件。

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