Question

我在我的网站上进行了一些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);
});

但我有2个问题

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

2）假设我在“google.com”，我输入了我的网址“www.mysite.com”，然后我拨打了ajax电话，然后转到“www.mysite.com/contacts”。如果我按下BACK按钮一次，我会去“www.mysite.com”，但是如果我再次按BACK，我仍然会在“www.mysite.com”，我发现自己不能回到谷歌。我怎么能解决这个问题？

所有帮助表示赞赏。感谢。

Answer 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>

Answer 2

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

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

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

历史API问题

2 个答案: