1

私は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を変更します。

4

0 に答える 0