Javascript Girl
  1. Javascript Girl
  3. Comment synchroniser l'historique du navigateur lors de l'utilisation d'Ajax?
Intereting Posts
TypeError: '' n'est pas une fonction (en évaluant 'elem ()' dans jQuery form.submit () Puis-je déclencher le clavier doux Android pour ouvrir via javascript (sans partage téléphonique)? Vitesse Javascript – Chrome v Firefox Window.location ne fonctionne pas correctement dans IE7 / 8 Où sont les variables dans une fermeture stockée – pile ou tas? Quelles sont les meilleures pratiques à suivre lors de la déclaration d'un tableau en Javascript? Configuration de la bande avec un montant personnalisé Jquery filtrage avec plusieurs cases à cocher JavaScript – créer un objet et utiliser une variable pour le nom de la propriété? Comment calculer le module d'entiers négatifs en JavaScript? Formule de balance des blancs (suppression de couleur)? Formatage des nombres lus à partir d'une feuille de calcul MaterializeCss modal Error openModal n'est pas une fonction Utilisation de casperjs et phantomjs pour racler plusieurs pages Modifiez dynamiquement l'image src en utilisant Jquery ne fonctionnant pas dans IE et Firefox

Comment synchroniser l'historique du navigateur lors de l'utilisation d'Ajax?

J'écris une simple application d'album photo utilisant ASP.NET Ajax.
L'application utilise des appels Ajax asynchrones pour précharger la photo suivante dans l'album, sans modifier l'URL dans le navigateur.

Le problème est que lorsque l'utilisateur clique sur le bouton Précédent dans le navigateur, l'application ne retourne pas à la photo précédente, mais elle navigue vers la page d'accueil de l'application.

Existe-t-il un moyen d'inciter le navigateur à ajouter chaque appel Ajax à l'historique de navigation?

Mise à jour: il existe maintenant l'API HTML5 History (pushState, popState) qui hashchange fonctionnalité de hashchange HTML4. History.js fournit une compatibilité entre les navigateurs et un repli optionnel pour les navigateurs HTML4.

La réponse à cette question sera plus ou moins la même que mes réponses à ces questions:

  • Comment afficher les requêtes Ajax dans l'URL?
  • Comment Gmail gère / renvoie-t-il dans JavaScript riche?

En résumé, vous voudrez certainement vérifier ces deux projets qui expliquent l'ensemble du processus de change et l'ajout d'ajax au mix:

  • JQuery History (en utilisant hashes pour gérer l'état de vos pages et lier les modifications pour mettre à jour votre page).

  • JQuery Ajaxy (extension ajax pour jQuery History, pour permettre les sites Web complets d'ajax tout en étant complètement discret et gracieusement dégradable).

MSDN a un article sur la gestion de l'historique du navigateur dans ASP.NET AJAX

De nombreux sites Web utilisent un iframe caché pour le faire, il suffit de rafraîchir l'iframe avec la nouvelle URL, qui l'ajoute à l'historique de navigation. Ensuite, tout ce que vous devez faire est de gérer la façon dont votre application réagit à ces événements «back button»: vous devrez détecter l'état ou l'emplacement de l'iframe ou actualiser la page à l'aide de cette URL.

Vous pouvez utiliser PathJS lib, simple et léger.

Exemple d'utilisation: 

 Path.map("#/page1").to(function(){ ... }); Path.map("#/page2").to(function(){ ... }); Path.root("#/mainpage"); Path.listen();

La mise à jour 3.5 SP1 prend en charge l'historique du navigateur et le bouton de retour dans ASP.NET ajax maintenant.

Pour toutes les solutions sur le bouton arrière, aucune d'elles n'est "automatique". Avec chacun, vous devrez faire du travail pour persister l'état de la page. Donc non, il n'y a pas moyen de "tromper" le navigateur, mais il existe d'excellentes bibliothèques qui vous aident avec le bouton de retour.

Info : Ajax Navigation est une caractéristique régulière de l'IE8 à venir.

Si vous utilisez Rails, essayez définitivement Wiselinks https://github.com/igor-alexandrov/wiselinks . C'est un couteau suisse pour la gestion de l'état du navigateur. Voici quelques détails: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/ .