Introduction à l'API d'historique HTML5-Tutoriel H5-php.cn

Introduction à l'API d'historique HTML5

jacklove

Libérer： 2018-06-11 10:08:53

original

1918 Les gens l'ont consulté

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>

Copier après la connexion

méthode window.onpopstate :

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Introduction à l'API d'historique HTML5