hashchange 事件未在 IE10 和 IE11 中触发，具有 history.pushState 和 url 手动操作的组合

Posted 2023-04-13

【中文标题】hashchange 事件未在 IE10 和 IE11 中触发，具有 history.pushState 和 url 手动操作的组合

【英文标题】：hashchange event not triggered in IE10 & IE11 with combo of history.pushState and url manual manipulation

【发布时间】：2014-07-18 23:28:04

【问题描述】：

我无法让 hashchange 事件在 IE10 和 IE11 中持续触发

如果我使用history.pushState改变当前的hash，然后操作url中的hash，那么hashchange会被触发一次。

如果重复上述操作，则不会触发 hashchange

我创建了一个 jsbin 来测试这个问题。 要在 IE10/IE11 中复制该问题，只需单击部分链接（例如第 4 部分），然后操作 url 中的部分 ID（例如第 3 部分）。应该触发 hashchange，但如果你重复，第二次就不会了。

http://jsbin.com/locor/5

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

【问题讨论】：

你能添加你的源代码吗？我会帮助人们诊断问题

同样的问题，似乎是 IE11 的错误（尚未在 IE10 上测试过），我还没有找到合适的解决方法。

【参考方案1】：

在下面进行复制。似乎如果您使用 pushState 更改哈希，IE 在检查 hashchange 事件时会忽略该更改。因此，如果您的哈希序列是：

# #foo（通过 pushstate 添加） #（手动添加到地址栏）

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>

【讨论】：

人们会认为手动触发 HashChangeEvent 会有所帮助，但在 IE 中 window.HashChangeEvent 在这种情况下是错误的；稍后它将可用，但在第一次加载期间不可用。