per far funzionare i miei pulsanti indietro e avanti con ajax

Question

Il mio sito sta funzionando molto più velocemente grazie ad un codice che ho faticosamente modificato, ma mi piacerebbe se i pulsanti Indietro/Avanti del browser funzionassero. In questo momento, con il mio codice qui sotto, la barra degli indirizzi del browser non cambia mai. Quando qualcuno fa clic su "Indietro", li toglie dall'applicazione.

Ci sarebbe un modo semplice per cambiare questo in modo che il pulsante Indietro/Avanti del browser funzionasse? Oppure se qualcuno mi può indirizzare nella giusta direzione. Grazie per qualsiasi aiuto.

$(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

Ecco un modo per rilevare ciò che stai chiedendo.

Tenere a mente giocando con i pulsanti avanti e indietro è un compito rischioso.

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

si dovrebbe verificare History.js Ecco alcuni esempi di codice: -

(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

È possibile utilizzare il plugin jQuery indirizzo (http://www.asual.com/jquery/address/). Ha un evento che rileva quando l'utente preme il pulsante Indietro/Avanti.

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

Per quanto ne so non c'è modo di differenziare tra avanti e indietro.