监听Safari后退按钮实现单页问卷历史控制方案求助

先搞懂Safari的核心差异 #

Safari对历史栈和popstate的处理跟Chrome不一样，主要坑点：

• 页面加载时会主动触发一次popstate事件，Chrome不会
• 在popstate回调里同步调用pushState，Safari可能不会正确更新历史栈
• 它的页面缓存（bfcache）机制会导致历史栈状态混乱，pageshow事件的persisted状态处理逻辑有差异

适配双浏览器的代码实现 #

下面的代码专门针对Safari的问题做了适配，核心是主动管理历史栈，用带标识的状态区分占位项和问卷页面，确保拦截逻辑准确：

// 初始化：记录初始历史栈长度，推一个带标识的占位状态
let initialHistoryLength = window.history.length;
window.history.pushState({ isSurveyPlaceholder: true }, null, document.URL);

// 监听后退事件
window.addEventListener('popstate', (event) => {
  // 到问卷首页，允许退到浏览器上一页
  if (onFirstPageOfSurvey) {
    // 因为初始推了占位项，所以要退2步回到真实上一页
    window.history.go(-2);
    return;
  }

  // 非首页，拦截后退行为
  if (event.state?.isSurveyPlaceholder) {
    // 重新推占位状态，维持历史栈长度，阻止页面跳转
    window.history.pushState({ isSurveyPlaceholder: true }, null, document.URL);
  } else {
    // 这里执行问卷内部的回退逻辑，比如切换到上一页内容
    // surveyGoBack(); // 替换成你自己的回退函数

    // 回退后重新推占位状态，防止再次后退直接离开问卷
    window.history.pushState({ isSurveyPlaceholder: true }, null, document.URL);
  }
});

// 处理Safari加载时的自动popstate触发
window.addEventListener('load', () => {
  if (window.history.length === initialHistoryLength) {
    window.history.pushState({ isSurveyPlaceholder: true }, null, document.URL);
  }
});

// 处理Safari页面缓存恢复的情况
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    initialHistoryLength = window.history.length;
    window.history.pushState({ isSurveyPlaceholder: true }, null, document.URL);
  }
});

额外优化建议 #

• 问卷内前进到下一页时，别用pushState，改用replaceState替换当前历史状态，这样不会增加历史栈长度，从根源上杜绝前进可能：

  // 切换到下一页时替换当前状态
  window.history.replaceState({ surveyPage: currentPageIndex }, null, document.URL);
  

• 不要依赖history.back(n)的步数判断，用自定义state记录问卷页面位置，避免历史栈长度变化导致的逻辑错误

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