小编典典

如何检测位置哈希的变化?

all

我正在使用 Ajax 和哈希进行导航。

有没有办法检查window.location.hash更改是否像这样?

http://example.com/blah #123
http://example.com/blah #456

如果我在文档加载时检查它,它会起作用。

但是如果我有基于#hash 的导航,当我按下浏览器上的后退按钮时它不起作用(所以我从 blah#456 跳转到 blah#123)。

它显示在地址框中,但我无法用 JavaScript 捕捉它。


阅读 107

收藏
2022-03-08

共1个答案

小编典典

真正做到这一点的唯一方法(以及“真正简单的历史”如何做到这一点)是通过设置一个持续检查当前哈希的间隔,并将其与之前的哈希值进行比较,我们这样做并让订阅者订阅更改的如果哈希更改,我们将触发的事件..
它并不完美,但浏览器本身并不支持此事件。


更新以使此答案保持新鲜:

如果您正在使用 jQuery(今天对于大多数人来说这应该是基础性的),那么一个不错的解决方案是使用 jQuery
通过使用其事件系统为您提供的抽象来监听窗口对象上的 hashchange 事件。

$(window).on('hashchange', function() {
  //.. work ..
});

这里的好处是您可以编写甚至不需要担心 hashchange 支持的代码,但是您确实需要做一些魔术,以鲜为人知的 jQuery 功能jQuery
special events
的形式。

使用此功能,您基本上可以为任何事件运行一些设置代码,当有人第一次尝试以任何方式使用事件时(例如绑定到事件)。

在此设置代码中,您可以检查本机浏览器支持,如果浏览器没有本机实现这一点,您可以设置一个计时器来轮询更改,并触发 jQuery 事件。

这完全使您的代码无需了解此支持问题,这种特殊事件的实现是微不足道的(获得一个简单的 98%
工作版本),但是当其他人已经有了.

2022-03-08