Code

Comment gérer le bouton Retour avec JavaScript

Un problème majeur avec les applications basées sur JavaScript est qu'elles brisent le bouton Précédent. Si vous mettez à jour le contenu de la page avec JavaScript plutôt que de charger une nouvelle page à partir du serveur, aucune entrée ne figure dans l'historique du navigateur. ainsi, lorsque l'utilisateur clique sur Retour, s'attendant à revenir à l'état précédent, ils se retrouvent plutôt sur le site précédent.

Le glisser-déposer est un excellent moyen pour les utilisateurs d'interagir avec vos applications Web. Mais les gains d’utilisabilité seront perdus si, après avoir passé du temps à parcourir votre application, les utilisateurs cliquent sur le bouton Précédent qui attend de revenir sur une page et retournent à leur écran de démarrage. Dans cet article "Bonjour! HTML5 & CSS3 "l'auteur Rob Crowther vous montre comment utiliser l'API de l'historique HTML5 pour éviter ce destin.

Le problème peut être démontré simplement. Tout ce dont vous avez besoin est une fonction qui met à jour la page en réponse à l'activité de l'utilisateur: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

et un petit balisage: 

Click Me
Recorded 0 clicks

Dans la vraie vie, votre page Web ferait quelque chose de plus compliqué, comme chercher du nouveau contenu à partir du serveur via AJAX, mais une simple mise à jour suffit à démontrer le concept. Voyons ce qui se passe lorsque l'utilisateur visite la page.

  1. L'utilisateur commence sur sa page d'accueil et décide de visiter l'incroyable application Click Me dont il a entendu parler.
  2. Ils saisissent l'URL ou suivent un lien depuis un email pour accéder à la page Click Me.
  3. Après quelques secondes d'interaction agréable, l'état de la page a changé plusieurs fois.
  4. Mais lorsque l'utilisateur clique sur le bouton Retour dans le navigateur, il découvre qu'au lieu de revenir à un état antérieur de la page, il accède à sa page d'accueil.

La fonction doclick () peut être mise à jour pour tirer parti de l’API de l’historique. Chaque fois que la page est mise à jour, elle définira également location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. L'utilisateur arrive à la page Click Me comme auparavant.
  2. Notez que maintenant l'URL est mise à jour après chaque clic - "#" est apparu à la fin.
  3. En cliquant sur le bouton Retour, vous revenez à la position # 2, démontrant que les états de page ont été ajoutés avec succès à l'historique. Mais notez que cliquer sur le bouton Précédent ne renvoie pas automatiquement la page à son état précédent.

Mise à jour de l'état de la page

La mise à jour de l'historique n'est qu'une partie du problème. Vous devez également pouvoir mettre à jour l'état de la page pour correspondre à l'état de l'historique.

Parce que c'est vous qui gérez l'historique, c'est à vous de gérer l'état de la page. Afin de mettre à jour votre page en réponse à la modification de location.hash, vous pouvez écouter l'événement hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

La fonction doclick () n'est plus responsable que de la mise à jour de la variable times et de la modification du hash. L'événement hashchange est sur l'objet window; quand cela se produit, vous vérifiez que le hash existe. Dans une application réelle, vous souhaitez également vérifier qu’il possède une valeur valide. Ensuite, vous définissez la valeur de fois pour être le nombre dans le hachage. Enfin, vous mettez à jour le document pour refléter l'état correct de la page. Regardons ce nouveau code:

  1. Comme précédemment, le hachage dans l'URL est mis à jour lorsque l'utilisateur clique.
  2. Mais maintenant, lorsque le bouton Précédent est cliqué, la fonction onhashchange est déclenchée et l'état de la page est réinitialisé pour correspondre à l'URL.

Utiliser location.hash

La propriété location.hash et l'événement hashchange associé sont utiles si vous souhaitez marquer des vues particulières de votre application et permettre à l'utilisateur de naviguer entre elles. Google Mail utilise cette approche en vous permettant de naviguer entre votre boîte de réception (#inbox), vos contacts (#contacts) et d’autres vues. Si vous avez un compte Gmail, regardez ce qui se passe sur l’URL puis cliquez en arrière.

Mais en ce qui concerne les informations d'état, le hachage ne permet que de stocker une chaîne. Vous pourriez encoder un objet plus complexe, mais l'URL deviendrait rapidement longue et lourde et ne serait pas mémorable pour vos utilisateurs. Si vous avez besoin d'informations plus complexes stockées dans le cadre de l'historique, une meilleure approche consisterait à utiliser le hachage comme clé pour extraire d'autres informations d'état de certains magasins. Bien que vous puissiez utiliser votre propre approche, HTML5 a fourni une API pour le faire à travers la méthode history.pushState () et l’événement popstate. Ces méthodes vous permettent de sauvegarder et de recharger un objet complexe.

Résumé

Vous avez appris que la gestion de l'historique du navigateur vous permet de faire en sorte que le bouton Précédent se comporte de manière plus sensée dans le contexte de votre application, tandis que l'API de microdonnées vous donne accès à des informations sémantiques structurées dans le contenu des pages.

Quelles utilisations envisagez-vous pour cette technique? Avez-vous développé une méthode différente? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, retour image via Shutterstock.

applications javascript bouton retour bonjour html5 & css api d'histoire voler crowther