10

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

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

有什么解决办法吗？

谢谢

4

4 回答 4

14

不是个好主意

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

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

使用 HTML5

HTML5 History 规范可能正是您所追求的。这是关于 Ajax 应用程序和浏览器的后退/前进功能的工作和完成方式。我建议你检查一下。查看一个可以很好地做到这一点的工作演示。

于 2011-11-21T07:51:07.940 回答
4

我相信这是 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 来跟踪站点状态。如果您浏览站点，然后在站点进入历史记录后开始使用后退按钮进行导航，它将动态更改状态，就像用户实际点击导航一样，而不是之后需要重新加载页面。

于 2012-07-18T12:48:04.567 回答
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();
     }
}

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

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

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

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}
于 2011-11-21T07:45:52.900 回答
1

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

于 2018-05-08T06:52:38.207 回答