javascript - 如何检测浏览器中的后退按钮？

Question

我有一个名为 back() 的函数，它将用于 ajax 调用。实际上我有一个包含最后 5 个搜索结果的数组堆栈，返回函数将切换到之前的结果集(根据该数组堆栈)，它甚至使用 window.history 更改 URL。 pushState() 当你点击后退按钮时。

我所说的后退按钮是浏览器中的一个元素，它可以撤销 back() 函数。现在，当用户单击浏览器的后退按钮时，我也想撤销 back() 功能。像这样:

window.onhashchange = function() {
 back(); // this function also changes the url
}

但遗憾的是，当我点击浏览器的背面时，window.onhashchange 将被撤销两次。因为当你使用 window.history.pushState() 更改 URL 时，window.onhashchange 将被撤销。

无论如何，我怎样才能检测到 URL 发生了哪些变化？是我的 JS 代码还是浏览器的后退按钮？

Answer 1

您可以使用 performance.navigation.type

在任何给定点，例如在 document.onload 上，您可以读取 type 的值，如果它是:

• 0 通过链接、书签、表单提交、脚本或在地址栏中键入 URL 访问页面。
• 1 通过单击“重新加载”按钮或通过 Location.reload() 方法访问该页面。
• 2 通过导航到历史记录访​​问该页面。
• 255 任何其他方式。

请注意，根据兼容性表，支持是有限的。 但是，从外观上看，该表似乎已经过时了。它说它在 chrome 上不受支持，我刚刚测试它并在我的 chrome 版本 (67.0) 上按预期工作