Comment modifier l'historique du navigateur dans des applications complexes HTML5 et JavaScript

N'aimez-vous pas les titres accrocheurs ?! Considérez une application sophistiquée telle que le client WebMail. En substance, c'est un programme JavaScript complexe fonctionnant sur une seule page HTML. L'utilisateur charge l'URL et est présenté avec une liste d'e-mails. Ils cliquent sur un titre et le contenu de l'e-mail est récupéré à l'aide de l'AJAX et affiché. Ils veulent maintenant revenir à la liste de diffusion; Que font-ils?… … Cliquez sur le bouton Retour du navigateur. Claquer. L'application se ferme et revient à la page qu'ils affichaient avant d'accéder à l'application. Ou, s'il s'agit d'un nouvel onglet de navigateur, le bouton arrière est désactivé et ne peut pas être cliqué. Nous avons donc un problème. Notre client webmail ne prend pas en charge le contrôle du navigateur que la plupart des utilisateurs comprennent. Il existe des solutions. Certains impliquent de modifier la marque de hachage (#name) dans l'URL afin que l'État puisse être conservé. Ce n'est pas parfait, mais fonctionne dans tous les navigateurs. Heureusement, le problème a été résolu avec le HTML5 History.pushstate et History.Replacestate Méthodes en conjonction avec l'événement Window.onpopstate. Essayez la page History.pushState () de démonstration… La technique est rafraîchissante et simple:

1. Lorsque l'état change, par ex. L'utilisateur ouvre un e-mail, History.pushState () est passé des informations d'état et exécuté. Cela permet le bouton de retour mais - surtout - ne déplace pas l'utilisateur de la page.
2. Vous pouvez exécuter History.pushState () autant de fois que nécessaire, ou modifier l'état actuel à l'aide de l'histoire.replacestate ().
3. Lorsque l'utilisateur clique (ou en avant), l'événement Window.onpopState est licencié. Une fonction de gestionnaire peut récupérer l'état associé et afficher l'écran approprié.

L'inconvénient? Oubliez la compatibilité IE jusqu'à l'arrivée de V10. Si vous devez soutenir IE9 et ci-dessous, il y a un certain nombre de cales, y compris History.js et HTML5-History-API . Écrivons du code. Supposons que vous venez d'afficher le résultat d'une demande Ajax:

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

Où:

• obj est tout objet JavaScript. Vous pouvez l'utiliser pour conserver les informations d'état, par exemple {«View»: «EmailContent», «Item»: 123};
• Le titre est un titre facultatif
• URL est une URL facultative. L'URL peut être n'importe quoi - le navigateur ne sautera pas sur cette page, mais pourrait si l'utilisateur a rechargé la page ou redémarré son navigateur. Dans la plupart des cas, vous voudrez utiliser des paramètres ou un nom de hachage, par ex. ? View = emailContent & item = 123; Votre application pourrait analyser ces valeurs au démarrage et retourner au même endroit.

History.ReplaceState () a des arguments identiques et n'est utilisé que si vous souhaitez remplacer l'état actuel par un nouveau. Vous avez maintenant besoin d'une fonction de gestionnaire qui s'exécute lorsque l'événement de la fenêtre PopState tire après le retour du navigateur ou le bouton Suivant:

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

L'emplacement de l'URL peut être déterminé avec document.location (document.location.search et document.location.hash Renvoie respectivement les paramètres et le nom de hachage). L'objet d'état historique défini par PushState () ou Remplacestate () est obtenu à partir de la propriété d'état de l'objet de l'événement. Vous pouvez utiliser les informations pour afficher l'écran approprié. Essayez la page History.pushState () de démonstration… Cliquez plusieurs fois sur le bouton historique.pushstate, puis appuyez sur en arrière pour voir ce qui se passe dans le journal. Très utile. Avez-vous rencontré des problèmes de bouton de retour et de prochain dans votre application Web?

Questions fréquemment posées (FAQ) sur l'historique JavaScript Pushstate

Quelle est la fonction principale de JavaScript History Pushstate?

Le JavaScript History Pushstate est une méthode qui vous permet de manipuler l'historique du navigateur. Il fait partie de l'API d'histoire et vous permet d'ajouter des entrées d'histoire. Ceci est particulièrement utile lorsque vous souhaitez créer une application à une seule page qui peut modifier l'URL sans recharger la page. Il aide à maintenir l'expérience utilisateur et l'état de l'application même lorsque l'utilisateur navigue à travers les boutons avant et arrière du navigateur.

Comment fonctionne lastate de l'historique JavaScript?

La STA de l'historique JavaScript fonctionne-t-elle En prenant trois paramètres: un objet d'état, un titre (qui est actuellement ignoré par la plupart des navigateurs) et une URL. Lorsque la méthode Pushstate est invoquée, elle crée une nouvelle entrée historique dans la pile d'historique du navigateur. Cette nouvelle entrée est associée à l'objet d'état spécifié et à l'URL. Lorsque l'utilisateur se rendra à cette nouvelle entrée, l'événement PopState est licencié et l'objet d'état est ramené à l'application.

Puis-je utiliser JavaScript History Pushstate dans tous les navigateurs?

Le JavaScript JavaScript L'histoire Pushstate est largement prise en charge dans tous les navigateurs modernes. Cependant, il n'est pas pris en charge dans Internet Explorer 9 et les versions antérieures. Par conséquent, si vous développez des applications pour les navigateurs plus âgés, vous devrez peut-être utiliser un polyfill ou une secours pour les URL basés sur le hachage.

Quelle est la différence entre les méthodes pushstate et le remplacement des méthodes JavaScript?

Les méthodes pushstate et remplacées font partie de l'API de l'histoire et sont utilisées pour manipuler l'histoire du navigateur. La principale différence entre eux est que Pushstate crée une nouvelle entrée d'historique et l'ajoute à la pile d'historique, tandis que Remplacestate modifie l'entrée historique actuelle sans en ajouter une nouvelle à la pile.

Comment puis-je gérer l'événement PopState Dans JavaScript?

L'événement PopState est licencié chaque fois que l'entrée d'historique active change. Si l'entrée d'historique a été créée par Pushstate, l'objet d'état associé à cette entrée est transmis à l'application. Vous pouvez gérer l'événement PopState en ajoutant un écouteur d'événement à l'objet Window et en définissant une fonction qui sera exécutée lorsque l'événement sera licencié.

Quel est l'objet d'état dans JavaScript History PushState?

L'objet d'état est un objet JavaScript associé à une entrée d'historique. Cet objet peut contenir n'importe quel type de données que vous souhaitez associer à l'entrée historique. Lorsque l'utilisateur accédez à l'entrée de l'historique, l'objet d'état est ramené à l'application, vous permettant de restaurer l'état de l'application.

Puis-je modifier l'URL sans recharger la page en utilisant JavaScript History Pushstate?

Oui, l'un des principaux avantages de l'utilisation de l'historique JavaScript Pushstate est qu'il vous permet de modifier l'URL sans recharger la page. Ceci est particulièrement utile lorsque vous souhaitez créer une application à une seule page qui peut modifier l'URL pour refléter l'état actuel de l'application.

Quel est le rôle de l'historique JavaScript Pushstate dans les applications d'une seule page?

Dans les applications à une seule page, JavaScript History Pushstate joue un rôle crucial dans le maintien de l'expérience utilisateur. Il vous permet de modifier l'URL pour refléter l'état actuel de l'application sans recharger la page. Cela signifie que l'utilisateur peut naviguer dans l'application à l'aide des boutons avant et arrière du navigateur sans perdre l'état d'application.

Comment puis-je utiliser l'historique JavaScript pour créer un système de navigation?

Vous pouvez Utilisez JavaScript History Pushstate pour créer un système de navigation en ajoutant des entrées d'historique pour chaque action de navigation. Lorsque l'utilisateur se rendra à une entrée d'historique, vous pouvez utiliser l'objet d'état associé à cette entrée pour restaurer l'état de l'application. Cela vous permet de créer une expérience de navigation transparente sans recharger la page.

Quelles sont les limites de l'utilisation de l'historique JavaScript Pushstate?

Alors que JavaScript History Pushstate est un outil puissant pour manipuler l'histoire du navigateur, il a certaines limites. Par exemple, il n'est pas pris en charge dans Internet Explorer 9 et les versions antérieures. En outre, il ne peut qu'ajouter des entrées d'historique pour la même origine, ce qui signifie que vous ne pouvez pas l'utiliser pour ajouter des entrées d'historique pour différents domaines.

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!