Die Anleitung zu Javascript History API

1- window.history

Jedes  Tab oder  Frame hat sein Objekt  history und jedes Objekt  history enthaltet einen Verweis auf ein besonderes Objekt,  "Joint Session History" sogenannt. Das besondere Objekt managet alle Objekte  history des Browser.
Verwenden Sie die Syntax  window.history (oder einfach  history) um die Geschichte von  Tab oder  Frame zuzugreifen.
Wie ändert die Liste der Seite in Geschichte wenn Sie in einer Seite in der Geschichte stehen und auf eine andere Seite springen, die zur Geschichte nicht gehört
Achtung: Auf eine andere Seite, die zur Geschichte nicht gehört, springen heißt dass, Sie die Button  BACK, FORWARD nicht benutzen und ein der Methode  history.back(), history.forward(), history.go() nicht rufen. Sie können auf eine neue Seite springen, die zur Geschichte nicht gehört, in dem Sie auf einer Link mit  URL anders als die momentane  URL klicken oder eine neue  URL eingeben und auf  Enter klicken,..
Vor dem Springen auf eine neue Seite:
Nach dem Springen auf eine neue Seite:

2- Properties

history.length

Die Anzahl der Entität zurückgeben, die in das Objekt Geschick von momentanen  Tab (oder  Frame) managet wird.

history.scrollRestoration

Wenn Sie auf eine der Funktionen  back(), forward(), go() aufrufen oder die Button  BACK, FORWARD benutzen um auf eine Seite in Geschichte zu springen. Nachdem die Geschichte-Seite anzeigt, versucht der Browser die Scroll-Position der Scroll-Leiste für diese Seite zurückzustellen. Die Zurückstellung hängt von der Wert von  history.scrollRestoration ab.
history.scrollRestoration hat 2 Werte   "auto" oder  "manual". Default ist  "auto".
history.scrollRestoration = "auto"
Der Browser hat die Aufgabe zur Zurückstellung der Scroll-Position der Scroll-Bar für Sie.
history.scrollRestoration = "manual"
Sie müssen die Scroll-Position der Scroll-Bar selbst zurückstellen. Um das zu machen, sollen die Informationen der Scroll-bar in jeder Geschichte-Entität. Sehen Sie mehr das Method  history.pushState(..).
Das folgende Video zeigt Sie den Unterschied zwischen die Werte   "auto" und  "manual":

3- Methods

Die Methode von  history:
  • go([delta])
  • back()
  • forward()
  • pushState(data,title[,url])
  • replaceState(data,title[,url])

history.go([delta])

delta Schritten in die Geschichte zurück (back) oder vorwärts (forward) . Wenn der Parameter  delta = 0 ist oder nicht geboten ist, wird der Browser die momentane Seite wiederladen (reload). Wenn  delta außer die erlaubten Wert liegt, macht der Browser nichts.

history.back()

Einen Schritt in die Geschichte zurück. Es ist äquivalent mit der Aufruf auf das Method  history.go(-1). Wenn es keine vorherigen Seite in die Geschichte gibt, macht der Browser nichts.

history.forward()

Einen Schritt in die Geschichte vorwärts (forward). Es ist äquivalent mit der Aufruf auf die Methode  history.go(1). Wenn es keine nächste Seite  in die Geschichte gibt, macht der Browser nichts.

pushState(data,title[,url])

Eine Entität (eine Seite) in die Geschichte erstelllen.

replaceState(data,title[,url])

Die momentane Entität in die Geschichte aktualisieren.

4- history.pushState()

Durch die Verwendung von  hash können Sie die Entitäten in die Geschichte erstelllen. Dadurch können Sie die Entitäten in die Geschichte ohne das Wiederladen (reload) der Seite haben.
Sehen Sie ein Beispiel  history mit  hash:

history.pushState(dataState, title [,url])

Das Method  history.pushState(..) erlaubt Sie, eine Entität in die Geschichte zu erstellen (Die  URL brauch nicht ändern). Das ist nutzlich für die Single Page Applikation.
Wenn der Benutzer auf einer Entität (eine Seite) in die Geschichte springen, und dieser Entität wird durch die Verwendung des Method  history.pushState() erstellt. Dann wird es das Event popstate erstellen.
Die Parameters:
dataState
Ein Objekt speichert den Zustand der Entität. Es gibt viele Dinge, die Sie in das Objekt speichern können, z.B die Scroll-Position der Scroll-bar. Das Ding hilft Ihnen bei der Zurückstellung der Scroll-bar Position manuell,...
title
Der Parameter  title bedeutet einen Vorschlag. Die Browser benutzt oft diesen Parameter nicht um den Titel für  document ​​​​​​​zu bilden.
url
Der Parameter  url ist nicht obligatorisch. Wenn geboten, muss er die gleiche Quelle (same origin) mit der momentanen  URL der Link haben

Example:

pushState-example.js
function showHistory()  {
   console.log(window.history);
   var log = document.getElementById("log-area");
   log.value="";
   log.value +="history.length="+ history.length +"\n";
   log.value +="history.scrollRestoration="+history.scrollRestoration+"\n";
   log.value +="history.state="+ JSON.stringify(history.state)+"\n";
}

function popstateHandler(popstateEvent)  {
    console.log(popstateEvent );
    document.title = popstateEvent.state.title;
    showHistory();
}

// popstate event handler:
window.onpopstate = popstateHandler;

var number = 0;

function call_pushState()  {
    number = number + 1;
    var title = "State "+ number;

    var dataState = {
         empId : number,
         showProfile: true,
         title: title
    };

    window.history.pushState(dataState, title);
    document.title = title;

    // Show current History:
    showHistory();
}
pushState-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>history.pushState()</title>
      <meta charset="UTF-8">
      <meta http-equiv="pragma" content="no-cache">

      <style>textarea {width:100%;margin-top:10px;}</style>

      <script src="pushState-example.js"></script>
      
   </head>
   <body onpageshow="showHistory()">

       <h2 id="my-h2">history.pushState(..)</h2>

      <button onclick="call_pushState()">
        Call history.pushState(..)
      </button>
      <br/><br/>

      <button onclick="history.back()">history.back()</button>
      <button onclick="history.forward()">history.forward()</button>
      <br/>

      <textarea rows="8" id="log-area"></textarea>

   </body>
</html>

 

5- history.replaceState()

history.replaceState(dataState, title [,url])

Das Method  history.replaceState(..) aktualisiert die Daten von Zustand, Titel und  URL für die momentanen Entität in die Geschichte.
Die Parameters:
dataState
Ein Objekt speichert den Zustand einer Entität.
title
Der Parameter  title bedeutet einen Vorschlag. Die Brower benutzen oft diesen Parameter nicht um den Titel für   document ​​​​​​​zu bilden.
url
Der Parameter url ist nicht obligatorisch. Wenn geboten, muss er die gleiche Quelle (same origin) mit der momentanen URL der Seite haben.

6- Das Event Popstate

Das Event popstate passiert wenn der Benutzer auf einer Seite (die Entität) in die Geschichte springt, die durch die Verwendung vom Method  history.pushState(..) oder  history.replaceState(..) erstellt wird.
Sie können das Event  popstate durch die Einfügung des Event Listener für das Objekt  window ​​​​​​​zuhören.
window.addEventListener(‘popstate’. function(popstateEvent)  {
    // Do something here!
)};
Oder verwenden Sie das Property  window.onpopstate:
window.onpopstate = function(popstateEvent). {
    // Do something here!
};
  • TODO Link!