So verwenden Sie das History-Objekt in Javascript

length

　Die Eigenschaft „history.length“ speichert die Anzahl der im Verlauf aufgezeichneten URLs. Zu Beginn beträgt dieser Wert 1. Da der IE10+-Browser anfänglich 2 zurückgibt, liegt ein Kompatibilitätsproblem vor, sodass dieser Wert nicht häufig verwendet wird

Jump-Methode

　go(), back() und forward()

　Wenn die verschobene Position die Grenze des Zugriffsverlaufs überschreitet, Die oben genannten drei Methoden melden keine Fehler, sondern schlagen stillschweigend fehl

[Hinweis] Bei Verwendung von Verlaufsdatensätzen wird die Seite normalerweise aus dem Browser-Cache geladen, anstatt den Server erneut aufzufordern, eine neue Webseite zu senden. Löst kein Onload aus

Datensätze hinzufügen und ändern

HTML5 fügt dem Verlaufsobjekt zwei neue Methoden hinzu, History.pushState() und History.replaceState(), die zum Hinzufügen und Ändern von Datensätzen im Browserverlauf verwendet werden. Das Statusattribut wird zum Speichern des Datensatzobjekts verwendet, während das Popstate-Ereignis zum Überwachen von Änderungen im Verlaufsobjekt verwendet wird einen Status zum Browserverlauf. Die pushState()-Methode benötigt drei Parameter: ein Statusobjekt, einen Titel (jetzt ignoriert) und eine optionale URL-Adresse.

　　 History.pushState(state, title, url);

　　state object – das Statusobjekt ist ein JavaScript-Objekt zum Verlauf, der von der Methode pushState() erstellt wurde. Wenn der Benutzer zu einem neuen Status weitergeleitet wird, wird das Popstate-Ereignis ausgelöst. Die Statuseigenschaft des Ereignisses enthält das Statusobjekt des Verlaufs. Wenn Sie dieses Objekt nicht benötigen, können Sie null

　　title eingeben – den Titel der neuen Seite, aber derzeit ignorieren alle Browser diesen Wert, sodass Sie null

　　URL eingeben können – dieser Parameter stellt die Adresse der Seite bereit Neuer Geschichtsrekord. Die neue URL muss sich in derselben Domäne wie die aktuelle URL befinden, andernfalls löst pushState() eine Ausnahme aus. Wenn dieser Parameter nicht speziell markiert ist, wird er auf die aktuelle URL des Dokuments gesetzt. Angenommen, die aktuelle URL ist example.com/1.html, verwenden Sie die pushState-Methode, um einen neuen Datensatz zum Durchsuchen hinzuzufügen Datensatz (Verlaufsobjekt).

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

　　Nach dem Hinzufügen des oben genannten neuen Datensatzes zeigt die Adressleiste des Browsers sofort example.com/2.html an, springt jedoch nicht zu 2.html und überprüft auch nicht, ob 2.html vorhanden ist. Es wird einfach zum neuesten Eintrag in . Wenn Sie zu diesem Zeitpunkt google.com besuchen und dann auf die Schaltfläche „Zurück“ klicken, wird als URL der Seite 2.html angezeigt, der Inhalt ist jedoch weiterhin der ursprüngliche 1.html. Klicken Sie erneut auf die Schaltfläche „Zurückspulen“, und die URL zeigt 1.html mit demselben Inhalt an. Kurz gesagt, die pushState-Methode löst keine Seitenaktualisierung aus, sondern führt nur dazu, dass sich das Verlaufsobjekt und die Anzeigeadresse der Adressleiste ändern Wenn sich der URL-Parameter von pushState ändert, löst das Setzen eines neuen Ankerwerts (d. h. Hash) das Hashchange-Ereignis nicht aus, selbst wenn sich die neue URL und die alte nur im Hash unterscheiden.

　　Wenn eine domänenübergreifende URL festgelegt ist, Es wird ein Fehler gemeldet. Der Zweck dieses Entwurfs besteht darin, zu verhindern, dass bösartiger Code Benutzer glauben lässt, dass sie sich auf einer anderen Website befinden Die Methode „replaceState()“ ändert die aktuellen Verlaufseinträge, anstatt neue Einträge zu erstellen page

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

　【popstate event】

　Alle Wenn sich der Browserverlauf (d. h. das Verlaufsobjekt) desselben Dokuments ändert, wird das Popstate-Ereignis ausgelöst

　[Hinweis] Es ist zu beachten, dass nur die pushState-Methode oder die replaceState-Methode aufgerufen werden muss löst dieses Ereignis nicht aus. Nur der Benutzer klickt zum Durchsuchen. Es wird nur ausgelöst, wenn Sie die Schaltflächen „Zurück“ und „Vorwärts“ drücken oder Javascript verwenden, um die Methoden „back()“, „forward()“ oder „go()“ aufzurufen. Darüber hinaus zielt dieses Ereignis nur auf dasselbe Dokument ab, wenn der Browserverlauf geändert wird und verschiedene Dokumente geladen werden. Bei Verwendung können Sie eine Rückruffunktion für das Popstate-Ereignis angeben. Der Parameter dieser Rückruffunktion ist ein Ereignisobjekt, und sein Statusattribut verweist auf das Statusobjekt, das von den Methoden pushState und replaceState für die aktuelle URL bereitgestellt wird (d. h. der erste Parameter dieser beiden Methoden)

　Event.state oben Code, Es ist das Statusobjekt, das über die Methoden pushState und replaceState an die aktuelle URL gebunden ist

Dieses Statusobjekt kann auch direkt über das Verlaufsobjekt gelesen werden

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

Roundtrip-Caching

Standardmäßig speichert der Browser die Seite im Cache Wenn der Benutzer in der aktuellen Sitzung (Sitzung) auf die Schaltfläche „Vorwärts“ oder „Zurück“ klickt, lädt der Browser die Seite aus dem Cache.

Der Browser verfügt über eine Funktion namens „Back-Forward-Cache“ (Back-Forward-Cache oder bfcache), der verwendet werden kann, wenn der Benutzer den Browser verwendet. Die Schaltflächen „Zurück“ und „Vorwärts“ beschleunigen Seitenübergänge. Dieser Cache speichert nicht nur Seitendaten, sondern auch den Status von DOM und Javascript. Tatsächlich wird die gesamte Seite im Speicher gespeichert. Wenn sich die Seite im bfcache befindet, wird das Ladeereignis nicht ausgelöst, wenn die Seite erneut geöffnet wird

　　pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数

　　第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

　　[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window

　　pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true

　　[注意]上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了

　　【pagehide】

　　与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象

　　[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常

　　pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。如果页面是从bfcache中加载的，那么persisted的值就是true；如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。因此，当第一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法：

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容html4，也可以监听pushState与replaceSate

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das History-Objekt in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!