window.location.hash，IE，Back and Forward:地址栏中的值更改，但不在DOM中更改

Question

尝试通过此示例javascript代码检测后退按钮事件：

document.location.hash="#1";
document.location.hash="#2";
document.location.hash="#3";
function check() {
    if("#3"!=window.location.hash) {
        alert("Back button clicked");
    }
    setTimeout(check, 100);
}
check();

在

FF和Chrome中它可以工作，在IE window.location.hash中始终是"#3"，即使我单击"后退"按钮并观察地址栏中的URL如何更改#2，#1。

有什么方法可以让IE在按前后移动后看到哈希的变化？

Answer 1

我假设您正在通过用户或定时事件动态更改哈希。

你不需要使用 setTimeout 来检查哈希，因为有一个 window.onhashchange 事件可以用来触发你的代码。

window.onhashchange = function(e) {
  alert('Back button clicked');
}

每次哈希更改时，无论是

通过使用后退/前进历史记录按钮还是使用代码更改哈希时，都会触发此代码。 如果您不希望在使用代码更改哈希时触发代码，则可以使用 if 语句，以便它仅适用于后退/向前历史记录导航，如以下示例所示：https://stackoverflow.com/a/11545805/1534818

或

您可以使用 window.onhashchange 根据哈希执行所有代码，只需使用 onclick 事件更改哈希即可确保您的代码仅执行一次。

.html：

<a href='#1' class='nav'>1<a/>
<a href='#2' class='nav'>2<a/>
<a href='#3' class='nav'>3<a/>

JavaScript/jquery：

/*$('.nav').click(function() {                 //do this if you aren't
  window.location.hash = '#' + $(this).html(); //changing the hash in your html
});*/
function getLocationHash() {
  return window.location.hash.substring(1);
} 
window.onhashchange = function(e) {
  switch(getLocationHash()) {
    case '1': 
      execute code block 1;
      break;
    case '2':
      execute code block 2;
      break;
    case '3':
      execute code block 3;
      break;
    default: 
      code to be executed if different from case 1, 2, and 3;
  }
}

我在我的网站上做了一些模拟的事情：http://www.designhandler.com