私はAJAXを使用してコンテンツをロードしており、pushastateを使用してURLを変更しています。以下は私のコードです。私の場合、onpopstateを実装して戻るボタンを有効にする方法を教えてもらえますか。
HTML
<div id="tabs" style="margin:1px 0px 0px 15px;">
<ul class="tabs-ul">
<li id="boardLi" class="current-tab"><a class="current-tab" href="board.jsp">Board</a></li>
<li id="aboutLi"><a href="aboutme.jsp">Info</a></li>
<li id="photoLi"><a href="photo.jsp">Photo Albums</a></li>
</ul>
</div>
JS
$(document).ready(function() {
function loadContent(path,c,pageName){
$.ajax({ url: path, success: function(html) {
$('#ajax-content').empty().append(html);
window.history.pushState({path:''},'',pageName+'?tab='+c);
}
});
}
function checkC(target){
var c='';
if(target=='aboutme.jsp')
{c='info';}
else if(target=='board.jsp')
{c='board';}
else if(target=='photo.jsp')
{c='photo';}
else if(target=='tab.jsp')
{c='ht';}
return c;
}
$(".tabs-ul li a").on('click', function(e) {
e.preventDefault();
$('#ajax-content').empty().append("<div id='loading'><img src='images/preloader.gif' alt='Loading' /></div>");
$('.tabs-ul li a').removeClass('current-tab');
$('.tabs-ul li').removeClass('current-tab');
$(this).addClass('current-tab');
$(this).parent().addClass('current-tab');
var url = window.location.pathname;
var pageName = url.substring(url.lastIndexOf('/') + 1);
var target=$(this).attr('href');
var c=checkC(target);
loadContent(target,c,pageName);
return false;
});
var loaded = false;
window.onpopstate = function(e) {
if (!loaded) {
loaded = true;
return;
} else {
alert(window.loacation.back().pathname);
loadContent();
}
};
});
ユーザーがリンクをクリックすると、まずロード用の削除クラスを追加し、次にURLを取得し、そのURLからページ名を取得します(「pageName」に保存)。「target」はクリックされたリンクのhrefattrおよび「c」です。はurlに表示する値です(たとえば、example.com / profile.jsp?tab = info、ここでhrefがinfo.jspの場合、「c」はinfoになります)、最後に「loadContent」関数を呼び出しますこれは、ajaxコンテンツをロードし、pushStateを使用してURLを変更します。