Javascript 历史API问题

我在我的网站上做了一些ajax调用，我试图实现historyapi来实现它，这样我就可以使用浏览器历史来导航它。这是“后退按钮”的代码：

但我有两个问题

1） 当我在地址栏中键入URL以首次加载页面时。这还会触发ajax调用，这显然是不希望的。没有必要使用ajax，因为我必须加载整个页面。这一个，我已经设法解决它与旗帜，但我想知道是否有一个更优雅的方式来做这件事

2） 假设我在“google.com”中，我键入我的URL“www.mysite.com”，然后我打了一个ajax电话，我转到“www.mysite.com/contacts”。如果我按一次后退按钮，我会进入“www.mysite.com”，但如果我再按一次后退按钮，我仍然会进入“www.mysite.com”，我发现我自己无法回到谷歌。我怎样才能解决这个问题

---

谢谢你的帮助。谢谢。

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

js是一个很好的库，它使历史API变得更加平滑。即使您不使用它，他们在这里也有关于API的良好文档：

---

关于你的第二个问题，浏览器将直接转到google，而不是为你的网站启动popstate事件。你不必担心，这是浏览器的责任。我认为你的方法是错误的。您不需要每次用户返回时都执行AJAX请求——这就是状态的目的，您应该已经拥有所有相关数据。IMHO逻辑应如下所示：

• 如果窗口已加载并且已设置了

  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>

window.onload=函数（）
{
if（window.history.state）
{
applyState（window.history.state）；
}
其他的
{
加载页（0，功能（状态、标题、位置）
{
window.history.replaceState（state，title，loc）；
});
}
addEventListener（“popstate”），函数（事件）
{
applyState（事件状态）；
});
}
函数goToPage（pageId）
{
loadPage（页面ID、功能（状态、标题、位置）
{
window.history.pushState（状态、标题、位置）；
});
}
函数加载页（pageId，回调）
{
setTimeout（函数（）
{
var state={text:“text”+pageId}；
苹果州；
回调（状态为“page”+pageId、#“+pageId）；
}, 100);
}
函数applyState（状态）
{
document.getElementById（“content”）.textContent=state.text；
}
???
1.
2.
3.

现在有很多解释，但最重要的问题没有得到回答：你想实现什么？为什么要在

popstate

处理程序中启动AJAX调用？我试图实现的是，当我用AJAX加载页面时，我可以使用后退和前进按钮进行浏览

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