Heim > Artikel > Web-Frontend > Einführung in die HTML5-Verlaufs-API

Einführung in die HTML5-Verlaufs-API

jackloveOriginal: 2018-06-11 10:08:531887Durchsuche

Einführung in die HTML5-Verlaufs-API

Verlauf ist eine globale Variable, nämlich window.history

Die Eigenschaften und Methoden lauten wie folgt:

Länge: Die Anzahl der Datensätze im Verlaufsstapel .

back(): Zurück zur vorherigen Seite.

forward(): Weiter zur nächsten Seite.

go([delta]): Delta ist eine Zahl. Wenn sie 0 oder leer ist, aktualisieren Sie diese Seite, falls dies der Fall ist positiv, dann gehen [Delta]-Seiten vorwärts, wenn negativ, gehen [Delta]-Seiten zurück.

HTML5 fügt die folgenden zwei Methoden hinzu:

pushState(data, title, [,url ] ): Fügen Sie einen Datensatz oben im Verlaufsstapel ein.

data ist ein Objekt oder Null, das als Statusparameter im Popstate-Ereignis des Fensters (window.onpopstate) übergeben wird.

title ist der Titel der Seite. Derzeit ignorieren alle Browser diesen Parameter.

URL ist die Seiten-URL, wenn nicht angegeben, ist es die aktuelle Seite.
replaceState(data, title, [,url]): Ändern Sie den Verlauf der aktuellen Seite. Durch diese Änderung wird nicht auf die URL zugegriffen.
Die URL-Parameter von replaceState() müssen genau mit dem Protokoll (z. B. HTTP, HTTPS) und dem Domänennamen der aktuellen Seite übereinstimmen (die Verwendung verschiedener Subdomänen funktioniert nicht)
Derzeit nur unterstützt von Safari 5.0+, Chrome 8.0+, Firefox 4.0+ und iOS 4.2.1+. Wenn Sie mit alten Browsern kompatibel sein möchten, können Sie History.js ausprobieren, das auch einige Fehler behebt.
pushState- und replaceState-Verwendung:

<?php
    $photo = isset($_GET[&#39;id&#39;])? $_GET[&#39;id&#39;] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>test</title>
  <script type="text/javascript">
  function go(c){
    document.title = &#39;test&#39; + c; //更改title
    window.history.pushState({&#39;title&#39;:&#39;test&#39;+c, &#39;photo&#39;:c}, &#39;test&#39;+c, &#39;test.php?id=&#39;+c); // 插入前一页历史记录
    window.history.replaceState({&#39;title&#39;:&#39;test&#39;+c, &#39;photo&#39;:c},&#39;test&#39;+c, &#39;test.php?id=&#39;+c);  // 更改当前历史记录
    document.getElementById("photo").src = c + &#39;.jpg&#39;;
  }
  window.onpopstate = function(obj){
    if(obj.state!=null){
        document.title = obj.state.title;  // 后退时更新title
        document.getElementById("photo").src = obj.state.photo + &#39;.jpg&#39;;
    }
  }
  </script>
 </head>
 <body>
  <p>
      <a href="javascript:void(0)" onclick="go(1)">page 1</a>
      <a href="javascript:void(0)" onclick="go(2)">page 2</a>
      <a href="javascript:void(0)" onclick="go(3)">page 3</a>
      <a href="javascript:void(0)" onclick="go(4)">page 4</a>
  </p>
  <p><img src="<?=$photo ?>.jpg" id="photo"></p>
 </body>
</html>

window.onpopstate-Methode:

window.onpopstate = function(event){
    alert(event.state);
}

In diesem Artikel geht es um die Einführung der HTML5-History-API. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in Bubbling, Dichotomie-Einfügung, Schnellsortierungsalgorithmus

Erklärung der PHP-Unterstützung für das Brechen von Verwandten Inhalt der Datei-Download-Klasse, die auf den Lebenslauf klickt

So filtern Sie die HTML-Tag-Attributklasse über PHP

Das obige ist der detaillierte Inhalt vonEinführung in die HTML5-Verlaufs-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die HTML5-Dateischnittstelle, um den Dateidownload auf einer Webseite zu nutzenNächster Artikel：So verwenden Sie die HTML5-Dateischnittstelle, um den Dateidownload auf einer Webseite zu nutzen

In Verbindung stehende Artikel

Mehr sehen