コンテンツ読み込み/履歴APIの問題

Question

私はHTML5の履歴APIの助けを借りてコンテンツを非同期に読み込むことを試していました。

私が抱えている問題は、<a href>がクリックされたときに、特に複数のページにジャンプするときにloadContent()メソッドが複数回呼び出されるということです。

これは、リンクを飛び越すにつれてページの速度が低下するため、複数回読み込まれない特定のファイルにも問題が生じます。

ここに私が今使っているコードがあります。

if (Modernizr.history) { 

    $(document).on("click", "a", function (event) { 
     event.preventDefault(); 
     _href = $(this).attr("href"); 

     history.pushState(null, null, _href); 

     loadContent("body", _href); 
    }); 

} else { 
    console.log("Browser does not support HTML5 History API. Please upgrade to a newer browser version."); 
} 

$(window).on("popstate", function() { 
    var link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only 
    loadContent("body", link); 
}); 

とloadContent()方法：私が間違ってやっているの

function loadContent(divId, href) { 
    $(divId).load(href); 
    console.log("Loading: " + href); 
}; 

任意のアイデア？ これ以上説明が必要な場合は教えてください。

ご協力いただきありがとうございます。

Answer 1

おそらく原因はあなたのアンカー要素がクリックされた場合ということです、あなたのコード

history.pushState(null, null, _href); 

は、現在のハンドラの実行が終了した後のターンのスケジュール「popstate」イベントで呼び出されるブラウザの履歴を、更新します。そのため、あなたは
のloadContent（）を持っています。
を2回呼び出す必要があります。