Einführung in die HTML5-Verlaufs-API-H5-Tutorial-php.cn

Einführung in die HTML5-Verlaufs-API

jacklove

Freigeben： 2018-06-11 10:08:53

Original

1920 Leute haben es durchsucht

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>

Nach dem Login kopieren

window.onpopstate-Methode:

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

Nach dem Login kopieren

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!