首页 > 其他分享 >关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析

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

时间:2023-01-19 23:34:30浏览次数:59  
标签:16 iOS back alert html pushState history

  • 设备: 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())。

标签:16,iOS,back,alert,html,pushState,history
From: https://www.cnblogs.com/sap-jerry/p/17062292.html

相关文章

  • logback-classic
    Logback是一个Java应用程序的日志记录框架。Logback存在远程代码执行漏洞,有编辑配置文件所需权限的攻击者可以制作恶意配置,允许执行从LDAP服务器加载的任意代码。......
  • axios的基本使用
    什么是axios?(官方文档地址:https://github.com/axios/axios)axios是前端最流行的ajax请求库react/vue官方都推荐使用axios发送ajax请求axios的特点基于......
  • CF1635E做题记录
    *2200的绿,是道好题不想投题解,因为思路重复,而且太麻烦了。先设任意一点向左,判断方向关系是否矛盾,类似二分图判定的染色。确定下方向后,就可以将原条件转换成为若干个类似......
  • 移动端 ios pageShow 事件和 android visibilitychange 事件; A页面跳转到B页面操作
    1.pageshow事件当浏览器因导航而显示窗口的文档时,pageshow事件将被触发。这包括:初始加载页面从同一窗口或选项卡中的另一个页面导航到该页面在移动操作系统上恢复......
  • 直播app开发搭建,ios 获取手机中所有图片
    直播app开发搭建,ios获取手机中所有图片首先我们得导入相关的库 #import<AssetsLibrary/AssetsLibrary.h>​代码: photo=[[NSMutableArrayalloc]init];ALAsset......
  • 解决:windows下php curl https时 SSL operation failed with code 1. OpenSSL Error me
    下载证书curl-ExtractCACertsfromMozillahttps://curl.se/docs/caextract.html 配置php.ini,把路径放上去  搞定收工......
  • 优麒麟(Ubuntu Kylin)16.10正式版发布
    伴随着Canonical公司正式推出Ubuntu16.10(YakketyYak),优麒麟(UbuntuKylin)推出了16.10正式版。此次发布的版本以增强本地化用户体验和稳定性为主,修复了之前版本积累的很......
  • LibreOJ L2056 「TJOI / HEOI2016」序列
    https://loj.ac/p/2056CDQ优化DP模板?首先定义对于第\(x\)个数其可以变为的最小值为\(Min_x\),最大值为\(Max_x\),初始为\(M_x\)。因为最多只会变一次数,不难想到......
  • background--详解(背景图片根据屏幕的自适应)
    ackground:有以下几种属性:background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackgr......
  • Codeforces Global Round 16 E
    E.BudsRe-hanging题链观察样例我们发现我们要尽可能的分解出来bud然后再来组合拼在一起是最优的当然我们可以从深度最深的开始判断是不是bud但是我们再观察发现只......