当hashchange发生时,IE不会触发popstate
我有使用history API和push / 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,因为它正在改变当前的历史记录。 但是,当我添加哈希链接( ...
),在IE上单击它时,什么都不会触发。 :/
我不想做IE检测(因为现在有很多浏览器可能会陷入同样的厄运),而不是使用特征检测。 但是,由于历史(popstate / pushstate)在其余部分工作得很好,我甚至无法检测到丢失的push / popstate上的问题……
if(!window.history || !window.history.pushState) { ...
…而是使用hashchange代替。 :/
有什么想法吗?
PS。 作为奖励,使用jquery.history.js(jquery包装的history.js版本)和hashtag url将整个事情搞得一团糟。
http://localhost/routetest/index.html#/page1/1234
变
http://localhost/page1/1234
…… ??? :/
尝试使用填充历史API进行更好的支持https://github.com/browserstate/history.js
这是IE11和Edge之前的所有Internet Explorer浏览器中的已知问题。
请参阅此链接https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/ 。 Microsoft回复是本期报告中的最后一篇文章,并注意到最新版本正在运行。
IE的所有版本都将显示此行为,并且将正确行为修复或猴子修补回事件框架可能是使其可靠运行的唯一方法。 这意味着如果您想自己实现它,您可能需要IE特定的逻辑。
在IE 10和11中,只有在使用history.pushState或replaceState设置状态之后,才会为历史项触发popstate事件,包括当它设置为null时,以及仅在已设置状态的两个项之间进行遍历时。 因此,有必要在hashchange事件中设置新历史记录项的状态。 设置状态后,当用户浏览浏览器历史记录时,将触发popstate事件。