Maison > Article > interface Web > Introduction à l'API d'historique HTML5

Introduction à l'API d'historique HTML5

jackloveoriginal: 2018-06-11 10:08:531930parcourir

Introduction à l'API d'historique HTML5

l'historique est une variable globale, c'est-à-dire window.history

Les propriétés et méthodes sont les suivantes :

longueur : Le nombre d'enregistrements dans la pile historique .

back() : Revenir à la page précédente.

foward() : passer à la page suivante.

go([delta]) : delta est un nombre, s'il est 0 ou vide, actualisez cette page, si c'est le cas positif, puis avancez les pages [delta], si négatif, revenez en arrière les pages [delta].

HTML5 ajoute les deux méthodes suivantes :

pushState(data, title, [,url ] ) : Insérez un enregistrement en haut de la pile d'historique.

data est un objet ou null, qui sera passé comme paramètre d'état dans l'événement popstate de la fenêtre (window.onpopstate).

titre est le titre de la page Actuellement, tous les navigateurs ignorent ce paramètre.

url est l'url de la page, si elle n'est pas écrite, c'est la page actuelle.
replaceState(data, title, [,url]) : Modifier l'historique de la page actuelle. Cette modification n'accédera pas à l'URL.
Les paramètres d'URL de replaceState() doivent être exactement les mêmes que le protocole (tel que HTTP, HTTPS) et le nom de domaine de la page actuelle (l'utilisation de sous-domaines différents ne fonctionnera pas)
Actuellement uniquement pris en charge par Safari 5.0+, Chrome 8.0+, Firefox 4.0+ et iOS 4.2.1+. Si vous souhaitez être compatible avec les anciens navigateurs, vous pouvez essayer History.js, et il corrige également quelques bugs.
pushState et replaceState utilisent :

<?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>

méthode window.onpopstate :

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

Cet article est une introduction à l'API d'historique HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web php chinois.

Recommandations associées :

Introduction au bouillonnement, insertion de dichotomie, algorithme de tri rapide

Explication de la prise en charge de PHP pour la rupture contenu de la classe de téléchargement de fichiers qui clique sur le CV

Comment filtrer la classe d'attribut de balise html via php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser l'interface de fichier HTML5 pour télécharger des fichiers sur une page WebArticle suivant：Comment utiliser l'interface de fichier HTML5 pour télécharger des fichiers sur une page Web

Articles Liés

Voir plus