Question

我的网页正在客户端进行路由，使用历史记录API＆amp;推/ popstate。这适用于所有现代浏览器。（node.js预渲染器将支持搜索引擎）

然而，我最近遇到了一个问题，即IE不会在hashchange上触发popstate，而pushstate和url的工作正常，包括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。作为奖励，使用带有＃标签url的jquery.history.js（jquery包装的history.js版本）可以将整个事情搞砸。

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

变为

http://localhost/page1/1234

...... ??? ：/

Answer 1

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

请参阅此链接https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/。 Microsoft回复是此问题报告中的最后一篇文章，并注意到最新版本正在运行。

所有版本的IE都会显示此行为，并且将正确的行为修复/猴子修补回到事件框架中可能是使其可靠运行的唯一方法。这意味着如果你想自己实现它，你可能需要IE特定的逻辑。

Answer 2

尝试在历史记录API中使用填充功能以获得更好的支持https://github.com/browserstate/history.js

Answer 3

在IE 10和11中，只有在使用history.pushState或replaceState设置状态后，才会为历史记录项触发popstate事件，包括在设置为null时，以及仅在已经有两个项之间进行遍历时国家集。因此，有必要在hashchange事件中设置新历史记录项的状态。设置状态后，当用户浏览浏览器历史记录时，将触发popstate事件。

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

当hashchange发生时，IE不会触发popstate

3 个答案: