h5 跳转外部页面再返回 Taro 页面，白屏

[bluescurry]

相关平台

H5

复现仓库

https://github.com/bluescurry/taro-debug
浏览器版本: 移动端浏览器
使用框架: React

复现步骤

在移动端浏览器中必现，复现步骤：

1. 从「首页」点击底部栏进入「我的」
2. 再从「我的」点击底部栏返回「首页」
3. 点击「首页」上的「点击跳转」按钮跳转到百度首页
4. 再按左上角返回到「首页」
5. 页面白屏

期望结果

页面正常展示首页

实际结果

页面白屏

环境信息

Taro CLI 3.4.1 environment info:
    System:
      OS: macOS 12.3.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.13.0 - /usr/local/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 8.1.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.8 => 3.4.8
      @tarojs/components: 3.4.8 => 3.4.8
      @tarojs/mini-runner: 3.4.8 => 3.4.8
      @tarojs/react: 3.4.8 => 3.4.8
      @tarojs/runtime: 3.4.8 => 3.4.8
      @tarojs/taro: 3.4.8 => 3.4.8
      @tarojs/webpack-runner: 3.4.8 => 3.4.8
      babel-preset-taro: 3.4.8 => 3.4.8
      eslint-config-taro: 3.4.8 => 3.4.8
      react: ^17.0.0 => 17.0.2

---

补充信息

PC端没问题，移动端不行

[Sun79]

我在iOS Safari浏览器中也遇到了同样的问题，初步判断为Safari往返缓存导致的页面空白，通过判断是否从缓存中加载并刷新页面可以解决这个问题。

// 解决Safrai后退页面不刷新
if (process.env.TARO_ENV === 'h5') {
  if (/iPhone|iPad|Safari/.test(navigator.userAgent)) {
    function handler(e) {
      // 判断页面是否从缓存中加载
      if (!e.persisted) return
      setTimeout(() => {
        window.location.reload()
      }, 10)
    }

    window.addEventListener('pageshow', handler, false)
    // 请替换为在React组件销毁事件中清理
    onBeforeUnmount(() => {
      window.removeEventListener('pageshow', handler, false)
    })
  }
}

[bluescurry]

我在iOS Safari浏览器中也遇到了同样的问题，初步判断为Safari往返缓存导致的页面空白，通过判断是否从缓存中加载并刷新页面可以解决这个问题。

// 解决Safrai后退页面不刷新
if (process.env.TARO_ENV === 'h5') {
  if (/iPhone|iPad|Safari/.test(navigator.userAgent)) {
    function handler(e) {
      // 判断页面是否从缓存中加载
      if (!e.persisted) return
      setTimeout(() => {
        window.location.reload()
      }, 10)
    }

    window.addEventListener('pageshow', handler, false)
    // 请替换为在React组件销毁事件中清理
    onBeforeUnmount(() => {
      window.removeEventListener('pageshow', handler, false)
    })
  }
}

我现在也是这么解决的，但是返回页面会重新加载一遍，体验不太好

[ZakaryCode]

该问题将在 3.5+ 版本修复。

该问题由于 safari 在外部链接返回时触发额外的 pop 事件导致，所以旧版本也可以通过 路由守卫 手动修复