历史 API 问题答案

【问题标题】：History API issues历史 API 问题
【发布时间】：2011-08-23 07:45:12
【问题描述】：

我在我的网站中进行了一些 ajax 调用，并尝试实现历史 API 来实现它，以便我可以使用浏览器历史浏览它。这是“返回按钮”的代码：


$(document).ready(function(){
  window.addEventListener("popstate", function(e) {

    //Flag I use to not fire it on the first page load
    if (!ajaxhistory)
      return;

    do_my_ajaxs_things();

  }, false);
});

但是我有两个问题

1) 当我第一次在地址栏中键入 URL 以加载页面时。这也会触发 ajax 调用，这显然是不受欢迎的。不需要ajax，因为我必须加载整个页面。这个，我已经设法用一个标志来解决它，但我想知道是否有更优雅的方法来做到这一点

2) 假设我在“google.com”中并输入我的 URL“www.mysite.com”，然后我进行 ajax 调用并转到“www.mysite.com/contacts”。如果我按一次 BACK 按钮，我会转到“www.mysite.com”，但如果我再次按 BACK，我仍然会在“www.mysite.com”，我发现自己无法返回 google .我该如何解决这个问题？

感谢所有帮助。谢谢。

【问题讨论】：

现在有很多解释，但最重要的问题没有得到解答：您要达到什么目的？为什么要在 popstate 处理程序中启动 AJAX 调用？
我想要实现的是，当我使用 ajax 加载页面时，我可以使用后退和前进按钮进行浏览

标签： javascript html browser-history

【解决方案1】：

我认为你的方法是错误的。每次用户返回时，您都不需要执行 AJAX 请求 - 这就是状态的用途，您应该已经拥有所有相关数据。恕我直言，逻辑应该如下：

如果窗口已加载且 window.history.state 已设置 - 只需应用此状态即可。
否则会触发 AJAX 请求以检索默认状态并替换当前状态。
每当用户导航到新“页面”时，触发 AJAX 请求以检索新状态并推送它。
在您的 popstate 处理程序中，您应该简单地应用您在 event.state 中获得的状态，而无需执行任何新的 AJAX 请求。

这里是一些带有伪造loadPage 函数的示例代码，通常您会将AJAX 调用放在那里。 applyState 函数和状态数据也非常少。

<script type="text/javascript">
window.onload = function()
{
  if (window.history.state)
  {
    applyState(window.history.state);
  }
  else
  {
    loadPage(0, function(state, title, loc)
    {
      window.history.replaceState(state, title, loc);
    });
  }

  window.addEventListener("popstate", function(event)
  {
    applyState(event.state);
  });
}

function goToPage(pageId)
{
  loadPage(pageId, function(state, title, loc)
  {
    window.history.pushState(state, title, loc);
  });
}

function loadPage(pageId, callback)
{
  window.setTimeout(function()
  {
    var state = {text: "text" + pageId};
    applyState(state);
    callback(state, "page " + pageId, "#" + pageId);
  }, 100);
}

function applyState(state)
{
  document.getElementById("content").textContent = state.text;
}
</script>
<div id="content">
  ???
</div>
<button onclick="goToPage(1);">1</button>
<button onclick="goToPage(2);">2</button>
<button onclick="goToPage(3);">3</button>

【讨论】：

【解决方案2】：

对于您的第一个问题，这确实是浏览器问题。最初加载页面时，浏览器应该（在我看来）永远不要触发 popstate 事件。我认为你能做的最好的事情就是只在页面加载后注册事件。

History.js 是一个很好的库，它可以很好地平滑历史 API。即使你不使用它，他们也有关于 API 的很好的文档： https://github.com/browserstate/history.js/wiki/The-State-of-the-HTML5-History-API

关于您的第二个问题，浏览器只会转到 google，而不是为您的网站触发 popstate 事件。你不必担心，这是浏览器的责任

【讨论】：