关于 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())。



相关文章
|
存储 缓存 算法
iOS 常见触发离屏渲染场景及优化方案总结
iOS 常见触发离屏渲染场景及优化方案总结
855 0
iOS 常见触发离屏渲染场景及优化方案总结
|
5月前
|
小程序 Android开发 iOS开发
mPaaS问题之Ios调小程序报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
mPaaS问题之Ios调小程序报错如何解决
|
Web App开发 安全 JavaScript
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
|
iOS开发
iOS 一天之内只提示一次方法
iOS 一天之内只提示一次方法
80 0
|
移动开发 iOS开发
H5页面在ios上经常卡住怎么办
H5页面上用了position:fixed, 在ios上滑动页面到底部,再连点几下,页面就会卡住,刚测试过
240 0
H5页面在ios上经常卡住怎么办
|
定位技术 iOS开发
iOS模拟动态定位的测试方案
iOS模拟动态定位的测试方案
173 0
iOS模拟动态定位的测试方案
|
iOS开发
iOS 12 在系统中文键盘上使用 AutoFill 会遇到诡异的问题以及解决方案
iOS 12 在系统中文键盘上使用 AutoFill 会遇到诡异的问题以及解决方案
276 0
iOS 12 在系统中文键盘上使用 AutoFill 会遇到诡异的问题以及解决方案
iPhone7、7P iOS10.2及以下系统转场动画出现白屏bug的解决办法
iPhone7、7P iOS10.2及以下系统转场动画出现白屏bug的解决办法
276 0
|
iOS开发
iOS reloadSections 页面跳动解决办法
iOS reloadSections 页面跳动解决办法
1189 0
|
iOS开发
iOS presentViewController 跳转黑屏现象解析
在利用stroyboard开发,有时候利用 TestViewController *control=[[TestViewController alloc]init]; [self presentModalViewController:control a...
1056 0