iOS14 history.back()无法工作。history.length始终为== 0

基础概念

history.back() 是 Web 浏览器提供的一个 JavaScript 方法，用于模拟浏览器的后退按钮功能，使用户能够返回到上一个访问的页面。history.length 属性则表示当前浏览器历史记录中的条目数量。

相关优势

• 用户体验：提供直观的后退功能，增强用户导航体验。
• 一致性：与浏览器的原生后退按钮行为一致，减少用户的学习成本。

类型

• 浏览器内置功能：history.back() 和 history.length 是浏览器提供的标准 API。

应用场景

• 单页应用（SPA）：在 SPA 中，页面内容通过 JavaScript 动态加载，使用 history.back() 可以实现页面间的导航而不刷新整个页面。

可能遇到的问题及原因

在 iOS 14 中，history.back() 可能无法正常工作，history.length 始终为 0，这通常是由于以下原因：

1. Safari 浏览器的限制：iOS 14 的 Safari 浏览器可能对某些历史记录 API 进行了限制或更改。
2. 页面加载方式：如果页面是通过 window.location.replace() 或 window.location.href 加载的，这些操作会替换当前历史记录条目，而不是添加新的条目。

解决方法

1. 检查页面加载方式： 确保页面是通过 window.location.assign() 或直接修改 window.location.href 加载的，而不是通过 window.location.replace()。
2. 检查页面加载方式： 确保页面是通过 window.location.assign() 或直接修改 window.location.href 加载的，而不是通过 window.location.replace()。
3. 使用 history.pushState()： 手动添加历史记录条目，确保 history.length 不为 0。
4. 使用 history.pushState()： 手动添加历史记录条目，确保 history.length 不为 0。
5. 检测浏览器版本： 在代码中检测浏览器版本，针对 iOS 14 进行特殊处理。
6. 检测浏览器版本： 在代码中检测浏览器版本，针对 iOS 14 进行特殊处理。
7. 使用第三方库： 如果上述方法都无法解决问题，可以考虑使用第三方库如 history.js 来管理历史记录。
8. 使用第三方库： 如果上述方法都无法解决问题，可以考虑使用第三方库如 history.js 来管理历史记录。

参考链接

• MDN Web Docs: window.history
• Can I use: history.pushState()

通过上述方法，可以解决 iOS 14 中 history.back() 无法工作和 history.length 始终为 0 的问题。