Wie HTML5-Verlauf mit Ajax App API-Aufrufe verwenden?

Question

Ich habe ein einbettbares JavScript-Widget, das ich gemacht habe, das mit einem WordPress-Plugin spricht, das ich gemacht habe. Grundsätzlich ruft das Widget einige benutzerdefinierte WP-API-Endpunkte auf und ruft den JSON zurück, um einen Feed von Produkten zu erstellen, die Kategorien sind. Jeder Klick auf die Kategorie führt über einen neuen API-Aufruf zur nächsten durch, um neue Daten zu erhalten.

Es funktioniert alles, yay, aber ich habe eine Menge Zeit zu versuchen, herauszufinden, wie man Browser-Taste zurück arbeiten.

Beachten Sie, dass es mir egal ist, ob es ein einfacher Hashbang oder was auch immer sein kann, dies muss nicht bookmarkbar oder Google crawlable sein.

Tutorials Ich finde nur sagen, PushState ist ein Objekt, aber was?

Mein Click-Handler wie folgt aussieht,

$('#sqsl_products').on('click', '.ssla-embed-link', function(e) { 
    e.preventDefault(); 
     var link = $(this), 
      linkType = link.attr('data-link_type'), 
      linkId = link.attr('data-link_id'); 

      switch(linkType) { 
       case 'categories': 
        getCategories(linkId); 
        break; 
       case 'products': 
        getProducts(linkId); 
        break; 
       case 'product': 
        getProduct(linkId); 
        break; 
      } 

}); 

Jeder Fall zu einem anderen Ajax-Aufruf geht, die die Daten und gibt sie bekommt, Beispiel:

function getCategories(id) { 
    $.ajax({ 
     method: 'GET', 
     url: apiUrl + '/categories', 
     beforeSend: function() { 
      $(domTag).prepend('<div class="ssla-loading-top"></div>'); 
     }, 
     dataType: 'json', 
     data: { categories: id }, 
    }) 
    .done(function(response) { 
     var catList = '<ul>'; 
     var brand = response.brand; 
     $.each(response.data, function() { 
      catList += '<li><a data-link_type=' + this.type + ' data-link_id=' + this.id + ' class="ssla-embed-link" href="#' + this.id + '"><img src="'+this.image+'"/>' + this.name + '</a></li>'; 
     }); 
     catList += '</ul>'; 
     $(domTag).removeClass().addClass('ssla-' + brand + ' ssla-categories').html(catList); 
    }) 
    .fail(function(jqXHR) { 
     var json = $.parseJSON(jqXHR.responseText); 
     $(domTag).removeClass().addClass('ssla-error').html(json.message); 
     console.log(jqXHR); 
    }); 
} 

Jetzt pushstate in das passieren würde, .done() Kette, und wenn ja, was wird dort hinzugefügt?

Alle Tipps werden sehr geschätzt, danke!

Update

Verstanden Arbeits-ish mit diesem

$(window).on('hashchange', function(e) { 

    var hash = document.URL.substr(document.URL.indexOf('#')+1); 
    var split = hash.split('-'); 
    if (split.length < 2) { 
     return; 
    } 
    var linkType = split[0]; 
    var linkId = split[1]; 

    console.log(linkType); 
    console.log(linkId); 

     switch(linkType) { 
      case 'categories': 
       getCategories(linkId); 
       break; 
      case 'products': 
       getProducts(linkId); 
       break; 
      case 'product': 
       getProduct(linkId); 
       break; 
     } 
}); 

versagt jedoch, wenn auf "erste" Seite zurück. Liegt das daran, dass es nicht über einen Hash gehandhabt wird und anfänglich über einen Ajax-Aufruf auf doc-ready geladen wird?

Answer 1

Schritt 1: Fügen Sie window.location.hash = "#categories-" + id; anstelle der switch-Anweisung hinzu.

/*switch (linkType) { 
    case 'categories': 
     getCategories(linkId); 
     break; 
    case 'products': 
     getProducts(linkId); 
     break; 
    case 'product': 
     getProduct(linkId); 
     break; 
}*/ 
//Replace the switch function. This will update the url to something like #categories-1 which will fire the event below 
window.location.hash = '#' + linkType + '-' + linkId; 
//Optionally, you can just set the href of the URL's to #categories-1 instead of using this function at all. 

Schritt 2: ein onhashchange handler hinzufügen, die jedes Mal, wenn der Hash ausgelöst werden (., Dh # Kategorien-1) Veränderungen in der URL:

$(window).on('hashchange', function(e) { 
     let split = window.location.split('-'); 
     if (split.length < 2) 
     return; 

     var linkType = split[0]; 
     var linkId = split[1]; 

     switch(linkType) { 
      case 'categories': 
       getCategories(linkId); 
       break; 
      case 'products': 
       getProducts(linkId); 
       break; 
      case 'product': 
       getProduct(linkId); 
       break; 
     } 
}