javascript - 如何区分浏览器返回和用户手动更改位置哈希

Question

问题

给定从 /page.html#A 到 /page.html#B 的导航，有没有办法区分用户:

1. 点击浏览器的“后退”按钮，以及
2. 手动将 url 改回 /page.html#A ?

背景/背景

我正在构建一个网络应用程序，其中单个页面在多张内容幻灯片之间转换，每张幻灯片都由特定位置哈希标识，例如 '#A'、'#B' 。

例如，当用户在幻灯片“A”上并选择选项“B”时，位置从 /page.html#A 更改为 /page.html#B 。

转换后，location.hash==#B 和 back()(通过 JS 或浏览器按钮)将用户返回到 location .hash==#A.

但是，没有什么可以阻止用户手动更改 URL 栏中的哈希值。在这种情况下，浏览器会认为这是向前导航，在向后历史记录中插入 /page.html#B。也就是说，导航历史将是 #A > #B > #A 并且现在点击返回会将用户带到 #B 。

我需要区分这两种情况，以便当我知道用户手动更新了 url 哈希时，我可以触发 go(N) 来同步浏览器后退/下一状态。

到目前为止的尝试

1) HTML5 popstate 事件:
我曾希望 html5 popstate 事件 ( https://developer.mozilla.org/en-US/docs/Web/Events/popstate ) 只会在案例 #1 中触发，但我可以确认它在两种情况下都会触发。

2) 浏览器.onhashchange事件
我可以确认，如果存在，则在两种情况下都会触发该事件

3) jQuery 移动版 hashChange()我可以确认在这两种情况下都被解雇了

4) 读取浏览器导航历史
我接下来的想法是维护一个哈希历史的 JS 数组，并比较新的哈希和浏览器历史是否与 JS 数组匹配，但是出于安全原因，JS 无法读取浏览器位置历史。

想法

我知道如果我调用 window.history.forward() 并且没有页面存在，则什么也不会发生。我正在考虑哈希历史的 JS 数组，调用 forward()，检查新的 location.hash(现在安全性允许)，与 JS 数组进行比较，然后调用 go(N) 来同步浏览器后退/下一个状态。但是有点乱。

Answer 1

由于 javascript 中没有后退按钮事件，我建议最好的办法是在您的页面上创建您自己的后退按钮

查看:How to Detect Browser Back Button event - Cross Browser