关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析

简介: 关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
  • 设备: iOS: 16.1.1
  • User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Mobile/15E148 Safari/604.1


问题重现步骤:


  • 使用 iOS 16.1.1 Safari 打开 test1.html
  • 点击 Link 超链接跳转到 test2.html
  • 在 test2.html 回退到 test1.html


期望的结果是看到 alert 对话框。


问题在 iOS 15 不能重现。


test1.html 的源代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test1</title>
  </head>
  <body>
    <a href="test2.html">Link</a>
  </body>
</html>


test2.html 的源代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test2</title>
  </head>
  <body>
    <button id="btn">history.back()</button>
    <script>
      history.pushState(null, null, null)
      window.addEventListener("popstate", _ => alert(1))
      document.getElementById("btn").addEventListener("click", _ => {
        history.back()
      }, false)
    </script>
  </body>
</html>

我在好几个浏览器上做了测试:


我刚试过,也可以在 macOS 上重现。


我在单击 history.back() 按钮时看到 alert,但在单击后退按钮(或向后滑动)时看不到 alert。


对于 history.back() 和通过浏览器 UI 向后导航之间的行为差异,我还没有任何解释(尽管我怀疑这与我们所做的一些后退/前进列表劫持预防工作有关)。


我还注意到我们的行为似乎与 Chrome 一致。 因此,如果有错误,那不是 WebKit 特有的。


Firefox 似乎始终如一地显示 alert,正如 Web 开发人员所期望的那样。


StackOverflow 上相关的讨论。


结论


哦,我只是更仔细地查看了测试用例,我明白了现在发生了什么。


与 Chrome 类似,WebKit 最近做了一些安全加固,以防止不良的 JavaScript 劫持后退/前进列表。 这意味着由 JS 添加的历史条目(例如通过 history.pushState())在用户导航时会被跳过,除非它们是通过用户交互添加的。


在测试用例中,test2.html 在没有用户交互的情况下调用 history.pushState()。 结果,创建的历史记录项被标记了一个特殊的标志。 如果用户向后滑动或按下后退按钮,我们将跳过这个“虚拟”历史记录项,因此不会触发 popstate 事件。 这是新的故意行为,应该与 Blink 保持一致。


如果不希望跳过历史记录项,则在调用 history.pushState() 时需要用户手势/激活(例如,由于用户单击按钮而调用 history.pushState())。

相关文章
|
10月前
|
iOS开发
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
37 0
|
2月前
|
iOS开发
iOS13.6.1系统XR手机图文按钮显示不全问题
iOS13.6.1系统XR手机图文按钮显示不全问题
37 0
|
2月前
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
29 0
|
2月前
按钮的image图片是非圆角,直接对UIButton设置圆角,iOS13系统没有圆角效果的问题及解决方案
按钮的image图片是非圆角,直接对UIButton设置圆角,iOS13系统没有圆角效果的问题及解决方案
23 0
|
8月前
|
Android开发 iOS开发
[√]cocos2dx openal在ios崩溃的问题分析
[√]cocos2dx openal在ios崩溃的问题分析
89 0
|
2月前
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
9天前
|
安全 Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的深度对比
在移动应用开发的广阔天地中,安卓和iOS两大平台各占半壁江山。本文旨在通过数据驱动的分析方法,深入探讨这两大操作系统在开发环境、用户界面设计及市场表现等方面的差异。引用最新的行业报告和科研数据,结合技术专家的观点,本文将提供对开发者和市场分析师均有价值的洞见。
|
12天前
|
Java 开发工具 Android开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
在移动应用开发的广阔天地中,Android和iOS两大平台各自占据着半壁江山。本文将深入探讨这两个平台在开发过程中的关键差异点,包括编程语言、开发工具、用户界面设计、性能优化以及市场覆盖等方面。通过对这些关键因素的比较分析,旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和目标受众做出明智的平台选择。
|
2天前
|
前端开发 编译器 iOS开发
探索iOS开发的未来:SwiftUI和Combine的革新之路
随着苹果不断推动其操作系统的进化,iOS开发领域正经历着一场前所未有的变革。本文将深入分析SwiftUI和Combine框架如何重塑iOS应用的开发流程,通过对比传统MVC模式与现代SwiftUI的差异,揭示Combine响应式编程范式在简化异步代码方面的巨大潜力。文章还将探讨这些技术如何影响开发者的生产力、应用的性能以及最终用户的体验。通过案例分析和数据支持,我们将展望iOS开发的新趋势,并讨论如何在不断变化的技术环境中保持竞争力。
|
12天前
|
编解码 Android开发 iOS开发
深入探索Android与iOS开发的差异与挑战
【6月更文挑战第24天】在移动应用开发的广阔舞台上,Android和iOS两大操作系统扮演着主角。它们各自拥有独特的开发环境、工具集、用户基础及市场策略。本文将深度剖析这两个平台的开发差异,并探讨开发者面临的挑战,旨在为即将踏入或已在移动开发领域奋斗的开发者提供一份实用指南。
36 13