để các nút quay lại và chuyển tiếp của tôi hoạt động với ajax

Question

Trang web của tôi hoạt động nhanh hơn nhờ vào một số mã tôi đã sửa đổi cẩn thận, nhưng tôi rất thích các nút quay lại/chuyển tiếp của trình duyệt đã hoạt động. Ngay bây giờ, với mã của tôi bên dưới, thanh địa chỉ trình duyệt không bao giờ thay đổi. Khi ai đó nhấp vào 'Quay lại', nó sẽ đưa họ ra khỏi ứng dụng.

Có bằng cách nào dễ dàng thay đổi điều này để nút quay lại/tiến trình của trình duyệt hoạt động không? Hoặc nếu ai đó có thể chỉ cho tôi đi đúng hướng. Cảm ơn vì bất kì sự giúp đỡ.

$(document).on("ready", function() { 

    //I want to load content into the '.page-content' class, with ajax 

    var ajax_loaded = (function (response) { 

     $(".page-content") 

     .html($(response).filter(".page-content")); 

     $(".page-content .ajax").on("click", ajax_load); 


    }); 



    //the function below is called by links that are described 
    //with the class 'ajax', or are in the div 'menu' 

    var history = []; 

    var ajax_load = (function (e) { 

     e.preventDefault(); 


     history.push(this); 
     var url = $(this).attr("href"); 
     var method = $(this).attr("data-method"); 


     $.ajax({ 
      url: url, 
      type: method, 
      success: ajax_loaded 
     }); 

    }); 


    //monitor for clicks from menu div, or with 
    //the ajax class 
    //why the trigger? 

    $("#menu a").on("click", ajax_load); 
    $(".ajax").on("click", ajax_load); 
    $("#menu a.main").trigger("click"); 



}); 

Answer 1

Đây là cách phát hiện những gì bạn đang yêu cầu.

Việc chơi trong các nút quay lại và tiến là một nhiệm vụ nguy hiểm.

window.onload = function() { 

    if (typeof history.pushState === "function") { 

     history.pushState("someState", null, null); 

     window.onpopstate = function() { 

      history.pushState("newState", null, null); 

      // Handle the back (or forward) buttons here 
      // Will not handle refresh, use onbeforeunload for this. 
     }; 
    } 
} 

Answer 2

Bạn chắc chắn nên kiểm tra History.js Dưới đây là một số mẫu mã: -

(function(window,undefined){ 

    // Prepare 
    var History = window.History; // Note: We are using a capital H instead of a lower h 
    if (!History.enabled) { 
     // History.js is disabled for this browser. 
     // This is because we can optionally choose to support HTML4 browsers or not. 
     return false; 
    } 

    // Bind to StateChange Event 
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate 
     var State = History.getState(); // Note: We are using History.getState() instead of event.state 
     //History.log(State.data, State.title, State.url); 
     var goto_url = State.url;    
     $.ajax({ 
      url: goto_url, 
      dataType: "script" 
     }); 
    }); 
    })(window); 

Answer 3

Bạn có thể sử dụng các plugin jquery địa chỉ (http://www.asual.com/jquery/address/). Nó có một sự kiện phát hiện khi người dùng nhấn nút quay lại/tiến.

$.address.externalChange(function() { console.log('back/forward pressed'); }); 

Theo như tôi biết không có cách nào khác biệt giữa quay lại và tiến.