Mac端Safari中popstate事件监听器失效问题排查与解决

问题原因 #

Safari（包括Mac端16.3版本）对popstate事件的触发逻辑和Chrome、Firefox存在差异：当调用history.pushState(null, null, null)时，由于推送的状态对象为null且URL未发生变化，Safari不会将此操作视为有效的历史状态添加，导致点击返回按钮时无法检测到历史栈的状态变化，因此不会触发popstate事件。

解决方法 #

核心思路是确保推送的历史状态与初始状态存在明确差异（可以是state对象有值，或者URL路径/hash不同），让Safari识别到历史栈的变化。

方案1：推送带标识的状态对象 + 修改URL hash #

// 推送带有自定义标识的状态，并修改URL的hash部分
window.history.pushState({ from: 'custom_push' }, null, '#push_state');

window.addEventListener('popstate', (event) => {
    console.log('fire!');
    // 可通过event.state判断是否是我们推送的状态，按需处理业务逻辑
    if (event.state?.from === 'custom_push') {
        // 执行你的逻辑
    }
});

方案2：仅推送非null的状态对象（保持URL不变） #

如果不想修改URL，只需推送一个非空的state对象，即可让Safari识别到状态变化：

// 推送非空的状态对象，URL保持当前页面地址
window.history.pushState({ type: 'initial' }, null, window.location.href);

window.addEventListener('popstate', (event) => {
    console.log('fire!');
});

补充说明 #

• 测试时需确保页面历史栈至少有两个条目：初始页面 + 我们推送的状态，点击返回按钮时才会触发popstate回到初始状态。
• 若要处理页面初始加载时的返回按钮（历史栈仅当前页），这种情况所有浏览器都不会触发popstate，需通过其他方式处理（比如监听beforeunload，但该事件并非返回按钮专属）。

内容的提问来源于stack exchange，提问作者y.dai