PushState auf Ajax Anruf?

Question

Mein Klient quält mich, um mit der Zurück-Taste des Browsers zu einer "vorherigen Seite" zurückzukehren. Die Sache ist, dass diese "Seiten" über Ajax zu einem modalen Fenster aufgerufen werden, das den Inhalt anzeigt. Ich mache einen Ajax-Anruf und ich habe festgestellt, dass PushState meine Lösung sein wird, aber ich verstehe es wirklich nicht. Ich fand Sachen, wo es nicht einmal ein bisschen Ajax gibt, es ist alles Javascript. Also, Was soll ich tun, um PushState zu einem Ajax-Aufruf hinzuzufügen? Ist das überhaupt möglich? Oder sollte ich nur einen Weg finden, damit es mit Ajax funktioniert?

Ich fand dieses Ding namens Pjax, aber ich verstehe es wirklich nicht. Mein Ajax-Anruf sieht ungefähr so ​​aus;

$(function() { 
    $('.w-container .w-nav-menu a').click(function() { 
     var $linkClicked = $(this).attr('href'); 
     var $pageRoot = $linkClicked.replace('#', ''); 
     if (!$(this).hasClass("active")) { 
      $(".w-container .w-nav-menu a").removeClass("active"); 
      $(this).addClass("active"); 
      $.ajax({ 
       type: "POST", 
       url: "./PATH/load.php", 
       data: 'page='+$pageRoot, 
       dataType: "html", 

       beforeSend: function(){ 
         $('#canvasloader-container.wrapper').show(); 
        }, 
       complete: function(){ 
         $('#canvasloader-container.wrapper').hide(); 
        },     
       success: function(msg){ 
        if((msg)) 
        { 
         $('.content').html(msg); 
         $('.content').hide().fadeIn(); 
        } 
       } 

      }); 
     } 
    event.preventDefault(); 
}); 

Es tut mir leid, wenn jemand anderes bereits so etwas wie dieses geschaffen, aber ich habe nichts nützlich

Answer 1

Sie finden eine pushState in jeder Phase tun können Sie im Code möchten Sie zur Verfügung gestellt, je nachdem, wann die Geschichte manipuliert werden soll.

können Sie tun nur history.pushState([data], [title], [url]); (mit entsprechenden Werten als Parameter) nur nach erfolgreicher Rückkehr Ajax Form und vor dem HTML-Inhalt wie folgt ersetzt:

success: function(msg){ 
    if((msg)) 
    { 
     history.pushState([data], [title], [url]); // replace with appropriate values as parameters 
     $('.content').html(msg); 
     $('.content').hide().fadeIn(); 
    } 
} 

Es könnte ein Problem sein, abhängig von der UX Dich‘ Wenn ein Benutzer durch Ajax-Aufrufe kontinuierlich auf Seiten zugreift und in diesem Fall keine URLs die vorherige Seite oder den 'Status' widerspiegeln, dann wird diese Lösung wahrscheinlich nicht für Sie funktionieren.

Verlaufsmanipulationsfunktionen wie pushState ändern nur die Browserhistorie, sie steuern nicht, was passiert, wenn jemand auf die Schaltfläche "Zurück" klickt.

Wenn in Ihrem Setup keine Seiten mit URLs geladen werden, müssen Sie möglicherweise steuern, was passiert, wenn ein Benutzer auf die Schaltfläche "Zurück" klickt, einen weiteren Ajax-Anruf ausführt und den vorherigen Inhalt lädt (Sie müssen den Überblick behalten) der Änderungen im Inhalt). Wenn dies Ihr Szenario ist, könnte dies Ihnen beim Einstieg helfen: https://stackoverflow.com/a/25806609/4283725