Detaillierte Erläuterung des Javascript-Verlaufsobjekts

Die vorherigen Wörter

Das History-Objekt speichert den Verlauf des Internetzugangs des Benutzers ab dem Moment, in dem das Fenster geöffnet wird. Aus Sicherheitsgründen können Entwickler die URL des Browsers des Benutzers nicht abrufen, aber mit der Liste der Seiten, die der Benutzer besucht hat, können sie vor und zurück gehen, ohne die tatsächliche URL zu kennen. In diesem Artikel wird die Eigenschaft

length

history.length des Verlaufsobjekts im BOM ausführlich vorgestellt, die die Anzahl der URLs im Verlauf speichert. Zu Beginn beträgt dieser Wert 1. Wenn das aktuelle Fenster drei URLs besucht hat, ist das Attribut „history.length“ gleich 3

Da der IE10+-Browser anfänglich 2 zurückgibt, liegt ein Kompatibilitätsproblem vor, sodass dieser Wert nicht häufig verwendet wird

history.length // 初始时，该值为1
history.length // 访问三个网址后，该值为3

Jump-Methode

Das History-Objekt bietet eine Reihe von Methoden, die das Wechseln zwischen dem Browserverlauf ermöglichen, einschließlich go(), back() und forward( )

【go()】

Verwenden Sie die go()-Methode, um beliebig im Verlauf des Benutzers zu springen. Diese Methode empfängt einen Parameter, einen ganzzahligen Wert, der die Anzahl der Seiten angibt, die rückwärts oder vorwärts gesprungen werden sollen. Negative Zahlen stehen für einen Rückwärtssprung (ähnlich der Zurück-Schaltfläche), positive Zahlen für einen Vorwärtssprung (ähnlich der Vorwärts-Schaltfläche)

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);

go() Wann Die Methode hat keine Parameter, sie entspricht History.go(0), die die aktuelle Seite aktualisieren kann

//刷新当前页面
history.go();
//刷新当前页面
history.go(0);

[back()]

Die Die back()-Methode wird verwendet, um die Zurück-Schaltfläche des Browsers zu imitieren, was der Funktion „history.go(-1)“ entspricht.

[forward()]

Die Methode „forward()“ wird verwendet, um die zu imitieren Die Vorwärtsschaltfläche des Browsers entspricht go(1)

//后退一页
history.back()
//前进一页
history.forward()

Wenn die verschobene Position die Grenze des Zugriffsverlaufs überschreitet, melden die oben genannten drei Methoden keinen Fehler , scheitern aber stillschweigend

[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

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

[Hinweis] IE9-Browser unterstützt nicht

[pushState()]

Die Methode „history.pushState()“ fügt dem Browserverlauf einen Status hinzu. 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, das sich auf den Verlauf bezieht und 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

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

URL eingeben können – this Der Parameter stellt die Adresse des neuen Verlaufsdatensatzes bereit. Die neue URL muss sich in derselben Domäne wie die aktuelle URL befinden, andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional. Wenn er 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 sie hinzuzufügen zum Browserdatensatz (Verlaufsobjekt) Ein neuer Datensatz

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

Nach dem Hinzufügen des neuen Datensatzes oben wird in der Adressleiste des Browsers sofort example.com/2.html angezeigt, dies ist jedoch der Fall Springt nicht zu 2.html. Es wird nicht einmal überprüft, ob 2.html vorhanden ist, es wird lediglich zum neuesten Eintrag im Browserverlauf. 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 angezeigte Adresse ändern in der Adressleiste zum Ändern

Wenn der URL-Parameter von pushState einen neuen Ankerwert (also Hash) setzt, wird das Hashchange-Ereignis nicht ausgelöst, auch wenn sich die neue URL und die alte nur im Hash unterscheiden

Wenn festgelegt: Wenn eine domänenübergreifende URL angegeben wird, wird ein Fehler gemeldet. Der Zweck dieses Designs besteht darin, zu verhindern, dass bösartiger Code Benutzer glauben lässt, sie seien auf einer anderen Website

// 报错
history.pushState(null, null, 'https://twitter.com/hello');

[replaceState()]

history.replaceState-Methode Die Die Parameter sind genau die gleichen wie bei der pushState-Methode, außer dass die replaceState()-Methode den aktuellen Verlaufseintrag ändert, anstatt einen neuen zu erstellen

Angenommen, die aktuelle Webseite ist example.com/example.html

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

[state]

Die Eigenschaft „history.state“ gibt das Statusobjekt der aktuellen Seite zurück

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

[popstate-Ereignis]

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

Es ist zu beachten, dass nur die Methode pushState oder replaceState aufgerufen wird Die Methode löst dieses Ereignis nicht aus. Sie wird nur ausgelöst, wenn der Benutzer auf die Schaltflächen „Zurück“ und „Vorwärts“ des Browsers klickt oder die Methoden back(), forward() und go() mit Javascript aufruft. Darüber hinaus zielt dieses Ereignis nur auf dasselbe Dokument ab und wenn verschiedene Dokumente geladen werden, wird das Ereignis nicht ausgelöst.

Bei Verwendung können Sie eine Rückruffunktion für das Popstate-Ereignis angeben. Der Parameter dieser Rückruffunktion ist ein Ereignisereignisobjekt, 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)

window.onpopstate = function (event) {
 console.log('location: ' + document.location);
 console.log('state: ' + JSON.stringify(event.state));
};　　

上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象

这个state对象也可以直接通过history对象读取

var currentState = history.state;

往返缓存

默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面

浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件

[注意]IE10-浏览器不支持

【pageshow】

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

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

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

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

(function(){
 var showCount = 0;
 window.onload = function(){
  console.log('loaded');
 }
 window.onpageshow = function(e){
  e = e || event;
  showCount ++;
  console.log(e.persisted,showCount + 'times');
 }
})();

[注意]上面的例子使用了私有作用域，以防止变量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);
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多javascript history对象详解相关文章请关注PHP中文网！