Détecter le changement de bouton de retour/ash dans l'URL

Question

Je viens de mettre en place ma nouvelle page d'accueil à http://ritter.vg . J'utilise jQuery, mais très peu.
Il charge toutes les pages en utilisant AJAX - Je l'ai configuré pour permettre l'ajout de signets en détectant le hash dans l'URL.

 //general functions
 function getUrl(u) {
      return u + '.html';
 }
 function loadURL(u)    {
      $.get(getUrl(u), function(r){
                $('#main').html(r);
           }
      );
 }
 //allows bookmarking
 var hash = new String(document.location).indexOf("#");
 if(hash > 0)
 {
      page = new String(document.location).substring(hash + 1);
      if(page.length > 1)
        loadURL(page);
      else
        loadURL('news');
 }
 else
      loadURL('news');

Mais je n'arrive pas à faire fonctionner les boutons de retour et d'avance.

Existe-t-il un moyen de détecter quand le bouton retour a été pressé (ou de détecter quand le hachage change) sans utiliser une boucle setInterval ? Lorsque j'ai essayé ces boucles avec des délais de 0,2 et 1 seconde, mon processeur était bloqué.

Answer 1

Les réponses ici sont toutes assez anciennes.

Dans le monde HTML5, vous devriez utiliser onpopstate événement.

window.onpopstate = function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Ou :

window.addEventListener('popstate', function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

Ce dernier extrait permet l'existence de plusieurs gestionnaires d'événements, tandis que le premier remplacera tout gestionnaire existant, ce qui peut causer des bogues difficiles à trouver.

Answer 2

Utilisez le Événement jQuery hashchange à la place. En ce qui concerne la navigation complète par ajax, essayez d'avoir Ajax convivial pour les moteurs de recherche . Sinon, vos pages n'apparaîtront pas dans les navigateurs ayant des limitations JavaScript.

Answer 3

jQuery BBQ (Bouton retour et bibliothèque de requêtes)

Un plugin d'historique de navigateur basé sur le hachage de haute qualité et très à jour (26 janvier 2010) au moment de la rédaction de cet article (jQuery 1.4.1) .

Answer 4

Le HTML5 a inclus une solution bien meilleure que l'utilisation de hashchange, à savoir les API de gestion d'état du HTML5. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - ils vous permettent de changer l'url de la page, sans avoir besoin d'utiliser des hashs !

Bien que la fonctionnalité d'état HTML5 ne soit disponible que pour les navigateurs HTML5. Vous voudrez donc probablement utiliser quelque chose comme Histoire.js qui offre une expérience rétrocompatible avec les navigateurs HTML4 (via des hachages, mais supporte toujours les données et les titres ainsi que la fonctionnalité replaceState).

Vous pouvez en savoir plus à ce sujet ici : https://github.com/browserstate/History.js

Answer 5

Une autre excellente mise en œuvre est celle de Balupton Histoire de jQuery qui utilisera l'événement natif onhashchange s'il est pris en charge par le navigateur, sinon il utilisera une iframe ou un intervalle approprié pour le navigateur afin de garantir que toutes les fonctionnalités attendues sont émulées avec succès. Il fournit également une interface agréable pour se lier à certains états.

Un autre projet à noter également est jQuery Ajaxy qui est en fait une extension de jQuery History pour ajouter ajax au mélange. Comme quand vous commencez à utiliser ajax avec des hachages, ça devient assez compliqué !