を使用して div 内のコンテンツを置き換える jquery ナビゲーション スクリプトを作成しました.load。また、pushstate と popstate で HTML5 History API を使用しています。
$(document).ready(function(){
$('.menu_top').on('click', function(e) {
$("#loading").show();
var href = $(this).attr('href');
history.pushState({url: href}, '', href);
$('#contentwrapper').fadeOut('normal').hide().load(href + " #contentwrapper > *");
$('#contentwrapper').waitForImages(function() {
$(this).fadeIn('slow');
});
$(document).ajaxSuccess(function() {
$("#loading").delay(1000).fadeOut();
});
});
var popped = ('state' in window.history), initialURL = location.href;
$(window).bind('popstate', function(event){
var initialPop = !popped && location.href == initialURL;
popped = true;
if ( initialPop ) return;
var state = event.originalEvent.state;
$('#contentwrapper').load(state.url + " #contentwrapper > *");
});
});
コードはほとんど機能し、ブラウザーの戻るボタンと進むボタンは正常に機能しますが、ブラウザーで「戻る」を押して、アクセスした元のページに移動しようとするまでは。例えば：
1ページから開始
ページ 2 へのリンクをクリック - 作品
ページ 3 へのリンクをクリック - 作品
ページ 2 の「戻る」を押してください - 動作します
ページ 1 の「戻る」を押してください - 機能しません
...
コンソールに次のメッセージが表示されます。
Uncaught TypeError: Cannot read property 'url' of null
との初体験popstateです。ブラウザを元のページに戻すにはどうすればよいですか? 問題を十分に説明したことを願っています。どんな助けでも大歓迎です！