IE not firing popstate when hashchange happens

Question

I have page that is doing the routing on clientside, using history API & push/popstate. Which works just fine on all the modern browsers. (search engines will be supported by node.js prerenderer)

However, I recently bumped into issue where IE doesn't fire popstate on hashchange while, while pushstate with urls works just fine, including IE11.

For example, like so...

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

...which correctly fires...

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

According the W3C spec, the hashchange should fire popstate as it's changing the current history. However, when I add in hash links (<a href="#hashchange">...), clicking that on IE, nothing fires. :/

I wouldn't want to do IE detecting (as nowadays there are so many browsers which might fall in to the same pit of doom), rather than using feature detection. However, as history (popstate/pushstate) works just fine the rest of the way I can't even detect the issue on missing push/popstate...

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

... and use the hashchange instead. :/

Any thoughts?

PS. As a bonus, using jquery.history.js (jquery wrapped version of history.js) with hashtag url blows the whole thing up.

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

becomes

http://localhost/page1/1234

... ??? :/

Answer 1

This is a known issue in IE11 and all Internet Explorer browsers before Edge.

See this link https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/. The Microsoft response is the last post in this issue report, and notes the newest version that is working.

All versions of IE will display this behavior, and hacking/monkey-patching the correct behavior back into the event framework is probably the only way to make it work reliably. This means you will likely need IE specific logic if you want to implement it yourself.

Answer 2

Try using a polyfill for History API for better support https://github.com/browserstate/history.js