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

Question

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

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

有解决方案吗

谢谢

Answer 1

不是个好主意

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

事实证明，遵循浏览器并以这种方式编写应用程序更好，这些事情变得无关紧要。 而且浏览器锁定越来越多的东西到客户端javascript应用程序也是如此，所以很可能你的应用程序在（很少）浏览器升级后会失败。

使用HTML5

HTML5历史规范可能正是您所追求的。 这是关于Ajax应用程序和browser0s后退/转发功能应该工作和完成的方式。 我建议你看看。 看一个相当不错的工作演示 。

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

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

您可能希望在离开页面之前尝试此onjavascript的“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();
     }
}

通过just（更新哈希并让“event”处理动作）：

<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的信息