Javascript On-window.location.hash-Change？

我使用Ajax和hash进行导航

有没有办法检查

window.location.hash

是否这样更改

#123至#456

如果我在加载文档时检查它，它就会工作

但如果我有基于散列的导航，当我按下浏览器上的“后退”按钮时，它就不起作用了（所以我从blah#456跳到blah#123）

---

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

可以在中找到一个不错的实现。 它唯一（但也是）的问题和缺陷是：在Internet Explorer中，手动修改位置哈希将重置整个历史堆栈（这是一个浏览器问题，无法解决）

---

请注意，Internet Explorer 8确实支持“hashchange”事件，而且由于它正在成为HTML5的一部分，您可能希望其他浏览器也能赶上它。

真正做到这一点的唯一方法（以及“reallysimplehistory”如何做到这一点）是设置一个时间间隔，不断检查当前哈希，将其与以前的情况进行比较，我们这样做，让订阅者订阅一个更改的事件，如果哈希更改，我们将触发该事件。。这并不完美，但浏览器本身并不支持此事件

---

更新以保持此答案的新鲜度：

如果您使用的是jQuery（今天对于大多数人来说，jQuery应该是基础性的），那么一个很好的解决方案就是使用jQuery提供的抽象，通过使用它的事件系统来侦听窗口对象上的hashchange事件

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

这里的好处是，您可以编写甚至不需要担心hashchange支持的代码，但是您确实需要做一些魔术，以一种不太为人所知的jQuery特性的形式

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

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

这使您的代码完全不需要理解这个支持问题，实现这种特殊事件很简单（要得到一个简单的98%工作版本），但为什么要这样做呢。

HTML5。这项活动现在正在进行中。在以下浏览器版本中添加了支持：

• Internet Explorer 8
• 火狐3.6
• 铬5
• 狩猎5
• 歌剧10.6

---

IE浏览器中有很多处理历史记录和window.location.hash的技巧：

• 正如最初的问题所说，如果你从a.html#b页面转到a.html#c页面，然后点击后退按钮，浏览器不知道该页面已更改。让我举一个例子：window.location.href将是“a.html#c”，无论您是在a.html#b还是a.html#c中

• 实际上，a.html#b和a.html#c仅当页面中以前存在元素“”和“”时才存储在历史记录中

• 但是，如果将iframe放在页面中，请在该iframe中从a.html#b导航到a.html#c，然后单击后退按钮，iframe.contentWindow.document.location.href将按预期更改

• 如果在代码中使用“document.domain=something”，则无法访问iframe.contentWindow.document.open（）

我知道这不是一个真正的回答，但也许IE历史笔记对某些人有用。

我使用了一个jQuery插件，并在上面编写了一个类似历史的界面

---

检查一下。如果您需要帮助，我可以提供帮助。

Firefox自3.6版以来就发生了onhashchange事件。请参阅。

另一个很好的实现是，如果浏览器支持，它将使用本机onhashchange事件，如果不支持，它将为浏览器适当地使用iframe或interval，以确保成功模拟所有预期功能。它还提供了一个很好的接口来绑定到某些状态

---

另一个值得注意的项目是，它几乎是jqueryhistory的扩展，用于将ajax添加到组合中。当您开始使用带有散列的ajax时，它得到了

Ben Alman有一个很棒的jQuery插件来处理这个问题：

---

如果您没有使用jQuery，那么对它进行剖析可能是一个有趣的参考

您可以轻松地在“window.location”对象的“hash”属性上实现一个观察者（“watch”方法）

Firefox有它自己的功能，但是如果你在其他浏览器上使用其他的实现（比如），那就可以了

代码如下所示：

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

然后您可以测试它：

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

当然，这会触发你的观察者功能

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

---

就这样。。。现在，无论何时按下后退或前进按钮，页面都将根据新的哈希值重新加载。

注意，对于InternetExplorer7和InternetExplorer9，if语句将给出true（对于windows中的“onhashchange”），但

窗口。onhashchange

将永远不会启动，因此，最好存储哈希值，并在每100毫秒后检查它，无论它是否对所有版本的InternetExplorer进行了更改

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

编辑-

---

由于jQuery 1.9，因此不支持

$.browser.msie

。来源：

我一直在使用path.js进行客户端路由。我发现它非常简洁和轻量级（它也被发布到NPM），并且使用了基于散列的导航

---

我在react应用程序中使用此选项，以使URL根据用户所处的视图显示不同的参数

我使用

window.addEventListener('hashchange', doSomethingWithChangeFunction());

然后

处理得很好，可以使用前向和后向浏览器按钮，也可以在浏览器历史记录中使用。

最新的Firefox版本（3.6 alpha）现在也支持本机哈希更改事件：当然值得检查此事件，但请注意，当它在IE7 compat模式下运行时，IE8会告诉您事件存在。。不幸的是，除夕夜

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};