歷史API問題

Question

我在網站上進行了一些Ajax調用，並嘗試實現history 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 。 我該如何解決這個問題？

所有幫助表示贊賞。 謝謝。

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是一個很好的庫，可以使history API更加平滑。 即使您不使用它，也可以在此處獲得有關API的良好文檔： https : //github.com/browserstate/history.js/wiki/The-State-of-the-HTML5-History-API

關於第二個問題，瀏覽器只會轉到google而不是為您的網站觸發popstate事件。 您不必擔心，這是瀏覽器的責任