如何在javascript中捕获浏览器的后退/前进按钮单击事件或哈希更改事件？

Question

我想在单击浏览器的后退或前进按钮或在 JavaScript 中更改哈希值时发出 alert() 。我已经尝试过 这个 解决方案并且它正在工作，但它导致网页中的其他链接出现问题，并且在任何链接点击事件上提交每个请求两次。

有没有解决方案可以在不使用 setInterval() 函数的情况下捕获它？所以我需要捕获哈希更改或后退/前进按钮点击事件？我需要一个简单的 javascript 代码/函数/属性，它应该适用于所有现代浏览器。

有什么解决办法吗？

谢谢

Answer 1

这不是一个好主意，

您能解释一下这背后的原因吗？我们都一直在防止后退/前进以及类似和破坏浏览器功能的道路上走下去。

事实证明，最好遵守浏览器并以这种方式编写应用程序，这样这些事情就变得无关紧要了。而且浏览器确实将越来越多的东西锁定到客户端 JavaScript 应用程序，因此在（几次）浏览器升级后您的应用程序很可能会失败。

使用 HTML5

HTML5 历史规范 可能正是您所追求的。这是 Ajax 应用程序和浏览器后退/前进功能的工作和完成方式。我建议你检查一下。请参阅工作演示，它做得相当好。

Answer 2

我相信这就是 Robert Koritnik 正在寻找的答案，我在这里找到了它： https://developers.google.com/tv/web/articles/location-hash-navigation

只要位置哈希更新或更改，就会触发一个事件 (window.onhashchange)，因此您只需执行以下操作即可做的是使用 JavaScript 设置事件处理程序来侦听此事件并根据哈希执行代码。这基本上是如何完成的：

function getLocationHash() {
  return window.location.hash.substring(1);
}
window.onhashchange = function(e) {
  switch(getLocationHash()) {
    case 'state1': 
      execute code block 1;
      break;
    case 'state2':
      execute code block 2;
      break;
    default: 
      code to be executed if different from case 1 and 2;
  }
}

我让它在我的网站上运行：
http://www.designhandler.com

都是动态变化的内容。还没有ajax，但当我完成后就会了。我仍然使用 window.location.hash 来跟踪站点状态。如果您浏览网站，然后在网站进入历史记录后开始使用后退按钮进行导航，它将动态更改状态，就像用户实际单击导航一样，而不需要随后重新加载页面。

Answer 3

这是为了哈希还是为了重定向？你想做什么？这种行为通常具有很强的侵入性。

您可能想在离开页面之前尝试此 javascript 的“onbeforeunload”事件

---

已编辑

实际上 ，您提供的链接非常准确。

var hash = location.hash;

setInterval(function()
{
   if (location.hash != hash)
   {
       hashUpdatedEvent(hash);
   }
}, 100);

function hashUpdatedEvent(hash)
{
     switch(...);
}

您的链接重复操作问题将得到纠正：

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   doWhatever();
   location.hash = 'somethingwasdone';
}

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}

如果您仅更改 By（更新哈希并让“事件”处理该操作），

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   location.hash = 'somethingwasdone';
}

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}

Answer 4

Javascript 提供了事件 popstate 来捕获浏览器的后退/前进按钮点击事件 -

window.addEventListener("popstate", function(e) { 
  // if a back or forward button is clicked, do whatever, like alert or anything

  console.log('href => ', e.path[0].location.href);
  // href =>  https://testdomain.com/demos/material/admin-app/#!/app/dashboard

  console.log('hash => ', e.path[0].location.hash);
  //hash =>  #!/app/dashboard

  console.log('pathname => ', e.path[0].location.pathname);
  //pathname =>  /demos/material/admin-app/

});

了解有关 popstate 的更多信息