IE在哈希变化时不触发popstate事件

Question

我有一个页面，使用历史API和push/popstate在客户端进行路由。这在所有现代浏览器上都能很好地工作（搜索引擎将由node.js预渲染支持）。

然而，最近我遇到了一个问题，就是IE在哈希更改时不会触发popstate事件，但url的pushstate却可以正常工作，包括IE11。

例如，像这样...

$(document).on('click', 'a', function(e) {
    e.preventDefault();
    History.pushState({}, '', $(this).attr('href'));
});

...能够正确触发...

$(window).on('popstate', function() {
    console.log('url changed');
});

根据W3C规范，hashchange应该在更改当前历史记录时触发popstate。然而，在添加哈希链接（<a href="#hashchange">...）后，在IE上单击它，没有任何反应。:/

我不想进行IE检测（因为现在有这么多浏览器可能会陷入同样的困境），而是使用特性检测。然而，由于历史记录（popstate/pushstate）在其余部分正常工作，我甚至无法检测到缺少push/popstate的问题...

if(!window.history || !window.history.pushState) { ...

...并使用hashchange代替。 :/

有什么想法吗？

PS. 作为奖励，使用带有hashtag url的jquery.history.js（history.js的jquery封装版本）会使整个事情崩溃。

http://localhost/routetest/index.html#/page1/1234

变成

http://localhost/page1/1234

... ??? :/

- crappish

---

你正在查看哪个版本的IE？在IE 9中，pushState()似乎存在问题。请查看此提供答案的问题：https://dev59.com/9G865IYBdhLWcg3wnf9t - urbz

啊，抱歉。我提到了现代浏览器，但是忘记了IE11的版本 :) - crappish

Answer 1

这是IE11及其之前所有Internet Explorer浏览器中已知的问题。

请参阅此链接https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/。 Microsoft的回复是此问题报告中的最后一篇帖子，并注明了可正常工作的最新版本。

所有IE版本都将显示此行为，并且可能需要通过黑客/猴子补丁将正确的行为重新插入事件框架，以使其可靠地工作。这意味着如果您想自己实现它，则可能需要特定于IE的逻辑。

- havocheavy

Answer 2

尝试使用History API的polyfill以获得更好的支持https://github.com/browserstate/history.js

- konsumer

---

我不理解为什么会有人踩这个回答。它解决了提问者的问题。 - konsumer

Answer 3

在IE 10和11中，只有在使用history.pushState或replaceState设置状态后，包括将其设置为null时，才会触发popstate事件，并且仅在两个已设置状态的项目之间遍历时才会触发。因此，在hashchange事件中设置新历史记录项的状态是必要的。一旦状态被设置，当用户通过浏览器历史记录导航时，popstate事件将触发。

https://developer.mozilla.org/en-US/docs/Web/API/History

- Trevor Karjanis