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

时间:2014-05-29 12:45:42

标签: internet-explorer-10 internet-explorer-11 hashchange

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

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

如果重复上述操作,则不会触发哈希转换

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

http://jsbin.com/locor/5

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

1 个答案:

答案 0 :(得分:1)

下面有一个复制品。似乎如果您使用pushState更改哈希,IE会在检查hashchange事件时忽略该更改。所以,如果你的哈希序列是:

  1. #foo(通过pushstate添加)
  2. #(手动添加到地址栏)
  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>