如何在AJAX頁面導航中使用錨的href

Question

我遇到以下問題：我試圖基於純AJAX頁面導航創建HTML5頁面。 所以我在主頁上有“ index.html”。 這個包含我的CSS，腳本和菜單。 菜單如下所示：

<ul>
    <li><a id="startLink" class="navlink" href="pages/start.html">Start</a></li>
    <li><a class="navlink" href="pages/test.html">Test</a></li>
</ul>

通過單擊其中一個錨點，我調用JavaScript，通過AJAX調用將“ href”下的頁面加載到“ index.html”上的div中。 因此，我的主頁永遠不會重新加載，所有新內容僅顯示在容器中。 該函數如下所示：

$(document).ready(function()
{
var popped = ("state" in window.history && window.history.state !== null), initialURL = location.href;

$(".navlink").click(function(e)
{
    var link    = $(this);
    var href    = link.attr("href");

    loadContent(href);
    window.history.pushState(null, null, href);

    e.preventDefault();
});

$(window).bind("popstate", function(e)
{
    // Ignore inital popstate that some browsers fire on page load
    var initialPop = !popped && location.href == initialURL;
    popped = true;
    if (initialPop) return;

    loadContent(location.pathname);
});

init();
});

function init()
{
    $("#startLink").click();
};

function loadContent(url)
{
    $("main").load(url);
};

我正在使用history.pushState和popstate函數來處理瀏覽器歷史記錄並在瀏覽器中顯示URL。 這很好，但是現在我們來解決我的問題。

當我加載index.html時，我的init（）函數單擊開始錨點以在頁面上顯示一些初始內容。 好吧，現在，如果我要轉到test.html，瀏覽器將向我顯示“ Host / Somepath / pages / pages / test.html”之類的路徑。 與開始相同：... / pages / pages / start.html。 我想原因是錨點上的我的href，因為瀏覽器認為他已進入我的文件夾頁面並顯示start.html。 他想從那里導航到頁面/頁面/以轉到我菜單中的任何其他頁面。 我的項目結構看起來像這樣：

• index.html
• 的CSS
• 圖片
• 劇本
• 頁數
  • start.html
  • test.html

有誰知道我該如何處理這個問題？ 我不想將所有html放在一個文件夾中，我需要子文件夾來對項目進行結構化。

Answer 1

嘗試使用HTML5 localStorage或sessionStorage

樣例代碼

window.sessionStorage.setItem('isFirst', true);
$(document).ready(function () {

  if(window.sessionStorage.getItem('isFirst')){
    window.sessionStorage.setItem('isFirst', false);
    //Put your code here. It will work only once
    init();
  }    
});

您可以閱讀有關HTML本地和會話存儲點擊的更多信息