Ist Ihnen beim Durchsuchen des Facebook-Fotoalbums aufgefallen, dass sich bei teilweiser Aktualisierung der Seite auch die Adresse in der Adressleiste ändert, und zwar nicht in einer Hash-Methode? Es verwendet mehrere neue APIs des HTML5-Verlaufs. Als globale Variable von Fenster ist der Verlauf im Zeitalter von HTML4 nichts Neues. Die, die wir häufig verwenden, sind History.back() und History.go().
Ich dachte immer, es gäbe keine Möglichkeit, das zu schaffen, bis ich vor zwei Tagen die Lösung von Robin Ward, einem der Gründer von Discourse, sah, und ich konnte nicht anders, als erstaunt zu sein.
Discourse ist ein Forenprogramm, das stark auf Ajax basiert, aber es muss Google ermöglichen, den Inhalt einzubinden. Die Lösung besteht darin, die Nummernzeichenstruktur aufzugeben und die History-API zu übernehmen.
Die sogenannte History-API bezieht sich auf die Änderung der in der Adressleiste des Browsers angezeigten URL, ohne die Seite zu aktualisieren (genauer gesagt ändert sie den aktuellen Status der Webseite). Hier ist ein Beispiel, bei dem Sie auf die Schaltfläche oben klicken, um mit der Musikwiedergabe zu beginnen. Klicken Sie dann erneut auf den Link unten und sehen Sie, was passiert?
Die URL in der Adressleiste hat sich geändert, aber die Musikwiedergabe wird nicht unterbrochen!
Eine detaillierte Einführung in die History-API würde den Rahmen dieses Artikels sprengen. Einfach ausgedrückt besteht seine Funktion darin, einen Datensatz zum Verlaufsobjekt des Browsers hinzuzufügen.
Mit der obigen Befehlszeile kann eine neue URL in der Adressleiste angezeigt werden. Die pushState-Methode des History-Objekts akzeptiert drei Parameter. Die neue URL ist der dritte Parameter. Die ersten beiden Parameter können null sein.
window.history.pushState(null, null, newURL);
example.com/2
example.com/3
function anchorClick(link) {
var linkSplit = link.split('/').pop();
$.get('api/' + linkSplit, function(data) {
$('#content').html(data);
});
}
$('#container').on('click', 'a', function(e) {
window.history.pushState(null, null, $(this).attr('href'));
anchorClick($(this).attr('href'));
e.preventDefault();
});
window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});
<html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>
