Question

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

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

任何解决方案？

由于

Answer 1

不是个好主意

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

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

使用HTML5

HTML5 History spec可能正是您所追求的。这是关于Ajax应用程序和browser0s后退/转发功能应该工作和完成的方式。我建议你看看。请参阅working demo，这样做非常好。

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 before leaving the page

尝试“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();
     }
}

只是（更新哈希并让“事件”处理动作）：

<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

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

4 个答案:

不是个好主意

使用HTML5

被修改