iOS端从BankID返回Safari时如何避免页面重载以保留状态？

核心思路：合法扩展URL锚点，避免触发页面重载 #

iOS Safari判断页面是否需要重载，核心对比URL的路径和查询参数部分，锚点（fragment）的合法变更默认不会触发重载。针对原有URL已带锚点的情况，可通过以下步骤实现：

• 步骤1：打开BankID前保存原锚点
  将当前页面的完整锚点存入sessionStorage，比如当前URL是https://example.com/page#checkout-step2，执行：

  sessionStorage.setItem('originalBankIDHash', window.location.hash);
  

• 步骤2：构造合法的重定向URL
  不要用双锚点格式，而是在原锚点后追加随机唯一标识，确保URL合法且BankID可识别：

  const originalHash = sessionStorage.getItem('originalBankIDHash');
  const randomSuffix = Math.random().toString(36).slice(2);
  // 拼接成合法锚点：#原锚点-随机串
  const redirectHash = originalHash ? `${originalHash}-${randomSuffix}` : `#${randomSuffix}`;
  const redirectUrl = `https://example.com/page${redirectHash}`;
  

• 步骤3：页面加载后恢复原锚点与状态
  在页面初始化时，检查锚点并通过history.replaceState修改URL（无重载），同时恢复页面状态：

  window.addEventListener('load', () => {
    const savedHash = sessionStorage.getItem('originalBankIDHash');
    if (savedHash && window.location.hash.includes(savedHash)) {
      // 移除追加的随机后缀，恢复原锚点
      window.history.replaceState(null, null, savedHash);
      // 从本地存储读取并恢复页面状态（如表单数据、步骤进度）
      restorePageState();
      sessionStorage.removeItem('originalBankIDHash');
    }
  });
  

兜底方案：直接保存页面状态到本地存储 #

如果锚点方案受限，可跳过URL操作，直接在打开BankID前把关键状态存入sessionStorage：

// 打开BankID前执行
sessionStorage.setItem('pageState', JSON.stringify({
  formData: { username: 'xxx', phone: '123456' },
  currentStep: 3,
  // 其他需要恢复的状态数据
}));

页面加载时，无论是否重载，都读取存储恢复状态：

window.addEventListener('load', () => {
  const savedState = sessionStorage.getItem('pageState');
  if (savedState) {
    const state = JSON.parse(savedState);
    // 恢复表单、步骤等状态
    document.getElementById('username').value = state.formData.username;
    setCurrentStep(state.currentStep);
    sessionStorage.removeItem('pageState');
  }
});

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