onpopstate 处理程序不会在 Chrome 中触发,除非在点击后退按钮之前发生鼠标单击

Dav*_*acs 2 google-chrome dom-events

我最近偶然发现 OSX 上 Chrome 的奇怪行为。加载某个页面时,我会将一个新页面推送到窗口历史记录中,这样如果用户单击后退按钮,就会加载新页面,而不是他们刚刚来自的页面。

我正在使用replaceStatepushState来修改历史记录,并设置onpopstate处理程序以在单击后退按钮时加载新页面。

然而,在 Chrome 中,这不起作用,除非用户在单击后退按钮之前单击页面上的任意位置(或按任意键)。

我似乎无法在小提琴上演示这个,但是如果您设置以下内容,您应该能够重现该行为

page1.html

<html>
<body>
<h1>This is page 1</h1>
<a href="page3.html">Go to page 3</a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

page2.html

<html>
<body>
<h1>This is page 2</h1>
<p>Well, how did you get here?</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

page3.html

<html>
<body>
<h1>This is page 3</h1>
<p>Why don't you go back to page 1?</p>
<script>
history.replaceState(null, '', 'page2.html');
history.pushState(null, '', 'page3.html');
window.onpopstate = function(event) {
  console.log("Reloading page in onpopstate handler");
  window.location = document.location
}
console.log("Push page2.html to history");
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后在同一目录(例如 )中启动简单的网络服务器并在 Chrome 中python -m SimpleHTTPServer 8000打开。localhost:8000/page1.html

我希望您应该能够单击指向第 3 页的链接,然后立即单击后退按钮并最终到达第 2 页。但是您没有,最终返回到第 1 页。

但是,如果您单击指向第 3 页的链接,然后单击页面上的任意位置,然后单击后退按钮,您将按预期到达第 2 页。在单击后退按钮之前按任意键也可以。

在 Firefox 和 Safari 中,您总是会按预期到达第 2 页。

我正在运行 OSX 10.14.5 和 Chrome 75.0.3770.100。

小智 6

Chrome 75推出了历史记录操纵干预。

\n\n

是公告/更多详细信息。

\n\n

干预总结:

\n\n
\n

有些页面使用户很难或不可能通过浏览器后退按钮返回到原来的页面。这是通过重定向或操纵浏览器历史记录来完成的,并会导致滥用/烦人的用户体验。这种干预使浏览器的后退按钮保持一致并防止滥用。浏览器\xe2\x80\x99 的后退按钮的新行为将是跳过添加了历史记录条目的页面或在不获取用户手势的情况下重定向用户的页面。请注意,干预仅影响浏览器\n 后退/前进按钮 UI,而不影响 History.back/forward API。

\n
\n\n

在此特定示例中,按返回键后,用户将转到他们访问的最后一个页面(第 1 页),而不是新页面。这符合用户对浏览器后退按钮的期望。

\n