1

データベースから動的コンテンツをロードする関数があります。特定のリンクがクリックされたときに呼び出されます。

jQuery

<script>
function loadContent(href){
$.getJSON("/route", {cid: href, format: 'json'}, function(results){  
$("#content_area").html("");
$("#content_area").append(results.content);
reinitFunc1();
reinitFunc2();
reinitFunc3();
// history.pushState('', 'New URL: '+href, href);
});
};
</script>

pushStateと を有効にしたいですonpopstate。

上記の行のコメントを外すことで、URL とブラウザーの履歴の変更を有効にすることができますhistory.pushState。複数のページ間で前後にナビゲートすることは正しく機能します。

しかし、これはコンテンツをロードしません。

しばらく前に、次の要素を追加することで、完全な機能 (つまり、ナビゲーションとコンテンツの読み込み) が得られたと思います。

window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};

したがって、それらを別のブロックに追加しようとしました：

<script>
$(document).ready(function() {
window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
</script>

しかし、これにより、ナビゲート時のページ範囲が 1 つに制限され、前方にナビゲートできなくなります。

上記のコードをベースとして使用して、ナビゲーションとコンテンツの読み込みの両方を実現するにはどうすればよいですか?

編集

参考までに、正しいパスはブラウザーの履歴にあります。ナビゲートできず (FF と Chrome)、対応するコンテンツが読み込まれていません。Firebug にエラーはありません。

4

1 に答える 1

0

これが答えだと思います、私はこれに出くわしました：

https://stackoverflow.com/a/10176315/1063287

「また、onpopstate() にロードされたページが pushState() 自体を使用してプッシュしようとしないことを確認してください」。

だから私はこれを保ちました：

<script>
$(document).ready(function() {
window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
</script>

しかし、これを関数から削除しました：

history.pushState('', 'New URL: '+href, href);

代わりに、クリックでトリガーされるjQueryに追加しました。

$(document).on("click","#main_menu a", function (e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
于 2013-11-22T11:32:48.750 に答える