The hashchange event does not fire in IE10 and IE11 using the history.pushState and url commands manually

Question

I'm having trouble getting the hashchange event to fire sequentially in IE10 and IE11

If I use history.pushState to change the current hash and then manipulate the hash in the url, then hashchange will run once.

Then, if the above is repeated, hashchange does not start

I created jsbin to test this problem. To replicate the problem in IE10 / IE11, simply click on the section link (e.g. section 4), and then process the section identifier in the URL (e.g. section-3). The exchange progress should be started, but if you repeat, then the second time it will not.

http://jsbin.com/locor/5

BTW - it works fine in Chrome and Firefox

Answer 1

Take a picture below. It seems that if you change the hash using pushState IE will ignore this change when checking hashchange events. Therefore, if the sequence of your hashes:

• #
• #foo (added via pushstate)
• # (manually added to the address bar)

IE compares # 3 to C # 1 instead of # 2. Starting from C # 1 === # 3, IE does not fire a hashchange event.

<script> function log(message) { var div = document.getElementById("log"); div.innerHTML += message + "<br>"; } window.addEventListener("hashchange", function () { log("hashchange"); }); window.addEventListener("popstate", function(){ log("popstate"); }); </script> <p>1. Manually set the hash in the address bar to "#".</p> <p><a onclick='history.pushState({}, "", "#somePushState");' style="color:blue;">2. Click here to run push state.</a></p> <p>3. Manually set the hash in the address bar to "#".</p> <br> <p>Expected: browser fires hashchange event for #1 and #3. Actual: IE does not fire hashchange event for #3.</p> <div id="log"><b>Log:</b><br></div>