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