在IE10和IE11中没有触发hashchange事件,其中包含history.pushState和url手动操作的组合

Question

我无法在IE10和IE11中一致地触发hashchange事件

如果我使用history.pushState来改变当前的哈希,然后操纵url中的哈希值,那么hashchange将被触发一次.

然后,如果重复上述操作,则不会触发散列更改

我已经创建了一个用于测试此问题的jsbin.要在IE10/IE11中复制问题,只需单击部分链接(例如第4部分),然后操作URL中的部分ID(例如第3部分).应该触发哈希变换,但如果重复,则第二次不会.

http://jsbin.com/locor/5

顺便说一句 - 这在Chrome和Firefox中完美运行

Answer 1

下面有一个重现。似乎如果您使用 PushState 更改哈希值，IE 在检查 hashchange 事件时会忽略该更改。因此，如果您的哈希序列是：

1. #
2. #foo（通过pushstate添加）
3. #（手动添加到地址栏）

IE 将#3 与#1 进行比较，而不是与#2 进行比较。由于 #1 === #3，IE 不会触发 hashchange 事件。

<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>