Die HTML5-Verlaufs-API implementiert aktualisierungsfreie Jump_html5-Tutorial-Fähigkeiten

Als ich einmal im Internet surfte, stellte ich fest, dass die Anmelde- und Registrierungsanimationseffekte sehr schön waren, aber was mich schockierte, war, dass die Seite ohne Aktualisierung springen konnte (sie wurde überarbeitet, Sie können hier klicken, um diesen Effekt zu sehen : GitHub oder FM), ich habe das Front-End-Wissen überprüft, das ich gelernt hatte, und es schien, dass es keine Technologie gab, die dies erreichen konnte. Also habe ich auf Baidu gesucht und festgestellt, dass dies ursprünglich durch die Verwendung der History-API in HTML5 erreicht wurde. aber es wurde nie verwendet. Erst bei der Überarbeitung des Blogs kam diese Technologie zum Einsatz.
In HTML5,
1 Möglichkeit hinzugefügt, Elemente im Browserverlauf über JS hinzuzufügen.
2. Zeigen Sie die URL in der Adressleiste des Browsers an und ändern Sie sie, ohne die Seite zu aktualisieren.
3. Es wurde ein Ereignis hinzugefügt, das ausgelöst wird, wenn der Benutzer auf die Zurück-Schaltfläche des Browsers klickt.
Durch die oben genannten drei Punkte können Sie die URL in der Adressleiste des Browsers dynamisch ändern und den Seiteninhalt dynamisch anzeigen, ohne die Seite zu aktualisieren.
Zum Beispiel: Wenn der Inhalt von Seite A und Seite B unterschiedlich ist, müssen Sie vor HTML5, wenn Sie von Seite A zu Seite B wechseln, im Browser von Seite A zu Seite B wechseln, oder mit anderen Worten: Wenn Sie die Zurück-Button-Funktion verwenden möchten, können Sie der URL-Adresse #XXXX hinzufügen, um die Zurück-Funktion zu erreichen. Jetzt können Sie in HTML5 die folgende Verarbeitung über die History-API implementieren:
1 Fordern Sie die B-Daten auf der Seite an, indem Sie eine AJAX-Anfrage auf Seite A senden.
2. Laden Sie die entsprechenden Informationen über JS auf Seite A an den entsprechenden Ort.
3. Verwenden Sie die Verlaufs-API, um in der Adressleiste des Browsers von der URL-Adresse von Seite A zur URL-Adresse von Seite B zu wechseln, ohne die Seite zu aktualisieren.
Verlaufs-API in HTML4
Attribute
1.length Die Anzahl der Verlaufselemente. Der Verlauf, den JavaScript verwalten kann, ist auf den Bereich beschränkt, der mit den „Vor“- und „Zurück“-Tasten des Browsers erreicht werden kann. Dieses Attribut gibt die Summe der Adressen zurück, die unter den Schaltflächen „Vorwärts“ und „Rückwärts“ enthalten sind.
Methoden
1.back() Zurück, was dem Drücken der „Zurück“-Taste entspricht.
2.forward() vorwärts, was dem Drücken der „Vorwärts“-Taste entspricht.
3.go() Verwendung: History.go(x); Gehe zu einer angegebenen Adresse innerhalb des Verlaufsbereichs. Wenn x < 0, gehen Sie zu x Adressen zurück, wenn x > 0, gehen Sie zu x Adressen vorwärts und wenn x == 0, aktualisieren Sie die jetzt geöffnete Webseite. History.go(0) entspricht location.reload().
Verlaufs-API in HTML5
1. History.pushState(data, title [, url]): Fügen Sie einen Datensatz oben im Verlaufsstapel hinzu Wenn das onpopstate-Ereignis ausgelöst wird, wird es als Parameter übergeben. Alle aktuellen Browser ignorieren diesen Parameter. Die URL ist die Seitenadresse und der Standardwert ist die aktuelle Seitenadresse.
2. History.replaceState(data, title [, url]): Ändern Sie den aktuellen Verlaufsdatensatz, die Parameter sind die gleichen wie oben.
3. History.state: Wird zum Speichern der Daten der oben genannten Methode verwendet. Verschiedene Browser haben unterschiedliche Lese- und Schreibberechtigungen.
4. Popstate-Ereignis: Dieses Ereignis wird ausgelöst, wenn der Benutzer auf die Zurück- oder Vorwärts-Schaltfläche des Browsers klickt. Lesen Sie in der Ereignisverarbeitungsfunktion den Statusattributwert des Ereignisobjekts, das das Ereignis ausgelöst hat. Dieser Attributwert ist der erste Parameterwert, der beim Ausführen der pushState-Methode verwendet wird, die den synchron gespeicherten Wert speichert, wenn ein Datensatz zum Browserverlauf hinzugefügt wird. Objekt.
Bisher unterstützen die Browser IE10, Firefox4 und höher, Chrome8 und höher, Safari5, Opera11 und höher die Verlaufs-API in HTML5.
HTML:

Code kopieren

Der Code lautet wie folgt:

• 
  测试
  


• 
  测试
  


• 
  测试
  

JS:

复制代码

代码如下:

/**
* HTML-Verlauf und Ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind ().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
}; }
ajax = $.ajax({
type:'POST',
url: url,
dataType:'json',
success: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i ) {
html = '

' data[i].age '

' '

' data[i].name '

' sex '';
}
$('.content').html(html);
}
var state = {
url: url,
title: document.title,
html: $('.content').html()
};
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
}else if(event && event.state){
document .title = event.state.title;
$('.content').html(event.state.html);
}else{
document.title = currentState.title; ('.content').html(currentState.html);
});