检测 URL 中的后退按钮/哈希更改

IT技术 javascript ajax navigation fragment-identifier hashchange
2021-02-02 22:28:29

我刚刚在http://ritter.vg设置了我的新主页。我正在使用 jQuery，但使用非常少。
它使用 AJAX 加载所有页面 - 我将它设置为允许通过检测 URL 中的哈希值来添加书签。 

 //general functions
 function getUrl(u) {
      return u + '.html';
 }
 function loadURL(u)    {
      $.get(getUrl(u), function(r){
                $('#main').html(r);
           }
      );
 }
 //allows bookmarking
 var hash = new String(document.location).indexOf("#");
 if(hash > 0)
 {
      page = new String(document.location).substring(hash + 1);
      if(page.length > 1)
        loadURL(page);
      else
        loadURL('news');
 }
 else
      loadURL('news');

但我无法让后退和前进按钮工作。

有没有办法在不使用 setInterval 循环的情况下检测何时按下后退按钮（或检测哈希何时更改）？当我尝试使用 0.2 和 1 秒超时的那些时，它锁定了我的 CPU。

6个回答

这里的答案都很旧。

在 HTML5 世界中，您应该使用 useonpopstate事件。

window.onpopstate = function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

或者：

window.addEventListener('popstate', function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

后一个片段允许存在多个事件处理程序，而前者将替换任何可能导致难以发现的错误的现有处理程序。

请改用jQuery hashchange 事件插件。关于您的完整 ajax 导航，请尝试使用SEO 友好的 ajax。否则，您的页面在具有 JavaScript 限制的浏览器中不会显示任何内容。

现在，您可以为此使用HTML5 API。
2021-04-11 22:28:29

HTML5 包含一个比使用 hashchange 更好的解决方案，即 HTML5 状态管理 API - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - 它们允许您更改页面的 url，而无需使用哈希！

尽管 HTML5 状态功能仅适用于 HTML5 浏览器。因此，您可能想要使用History.js 之类的东西，它为 HTML4 浏览器提供向后兼容的体验（通过哈希，但仍支持数据和标题以及 replaceState 功能）。

您可以在此处阅读更多相关信息：https : //github.com/browserstate/History.js

另一个很棒的实现是 balupton 的jQuery History，如果浏览器支持它，它将使用本机 onhashchange 事件，如果不支持，它将为浏览器使用适当的 iframe 或间隔，以确保成功模拟所有预期的功能。它还提供了一个很好的界面来绑定到某些状态。

另一个值得注意的项目是jQuery Ajaxy，它几乎是 jQuery History 的扩展，用于将 ajax 添加到组合中。当您开始使用带有哈希的 ajax 时，它会变得非常复杂！

其它你可能感兴趣的问题
上一篇Reactjs 组件的异步渲染 下一篇检查事件是否由人触发