web-dev-qa-db-fra.com

Détection du bouton Retour / Changement de hachage dans l'URL

Je viens de configurer ma nouvelle page d'accueil à http://ritter.vg . J'utilise jQuery, mais de façon très minimale.
Il charge toutes les pages en utilisant AJAX - Je l'ai configuré pour permettre le bookmarking en détectant le hachage 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 Précédent et Suivant.

Existe-t-il un moyen de détecter lorsque le bouton de retour a été enfoncé (ou de détecter lorsque le hachage change) sans utiliser de boucle setInterval? Lorsque j'ai essayé ceux avec des délais d'attente de 0,2 et 1 seconde, cela a fixé mon processeur.

javascriptajaxnavigationfragment-identifierhashchange
60
Tom Ritter

Utilisez plutôt le plugin jQuery hashchange event . Concernant votre navigation ajax complète, essayez d'avoir ajax SEO friendly . Sinon, vos pages ne montrent rien dans les navigateurs avec des limitations JavaScript.

31
Komang

Les réponses ici sont toutes assez anciennes.

Dans le monde HTML5, vous devez utiliser l'événement onpopstate .

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));
});

Le dernier extrait permet à plusieurs gestionnaires d'événements d'exister, tandis que le premier remplacera tout gestionnaire existant qui pourrait provoquer des bogues difficiles à trouver.

46
Drew Noakes

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

Un plugin d'historique de navigateur basé sur le hachage de haute qualité et beaucoup à jour (26 janvier 2010) au moment de la rédaction de ce document (jQuery 1.4.1) .

12
micahwittman

HTML5 a inclus une bien meilleure solution que d'utiliser hashchange qui est les API de gestion d'état HTML5 - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - elles vous permettent de changer l'url de la page, sans avoir besoin d'utiliser des hachages!

Bien que la fonctionnalité d'état HTML5 ne soit disponible que pour les navigateurs HTML5. Donc, vous voulez probablement utiliser quelque chose comme History.js qui fournit une expérience rétrocompatible aux navigateurs HTML4 (via des hachages, mais prend toujours en charge 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

11
balupton

Une autre excellente implémentation est balupton jQuery History 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 que le navigateur s'assure que toutes les fonctionnalités attendues sont réussies émulé. Il fournit également une interface agréable pour se lier à certains états.

Un autre projet à noter également est jQuery Ajaxy qui est à peu près une extension pour jQuery History pour ajouter ajax au mix. Comme lorsque vous commencez à utiliser ajax avec des hachages, cela devient assez compliqué !

2
balupton

Je fais ce qui suit, si vous souhaitez l'utiliser, puis collez-le dans certains où et définissez votre code de gestionnaire dans locationHashChanged (qs) où commenté, puis appelez changeHashValue (hashQuery) chaque fois que vous chargez une demande ajax. Ce n'est pas une réponse rapide et il n'y en a pas, vous devrez donc y penser et passer des arguments de hachage Query sensibles (c'est-à-dire a = 1 et b = 2) pour changer la valeur de hachage (hachage de la requête), puis répondre à chaque combinaison desdits arguments dans votre emplacement HashChanged (qs) rappel ...

// Add code below ...
function locationHashChanged(qs)
{
  var q = parseQs(qs);
  // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !!
  // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION
  //  THAT IS PASSED TO changeHashValue(hashQuery)
}

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ...
function changeHashValue(hashQuery)
{
  stopHashListener();
  hashValue     = hashQuery;
  location.hash = hashQuery;
  startHashListener();
}

// AND DONT WORRY ABOUT ANYTHING BELOW ...
function checkIfHashChanged()
{
  var hashQuery = getHashQuery();
  if (hashQuery == hashValue)
    return;
  hashValue = hashQuery;
  locationHashChanged(hashQuery);
}

function parseQs(qs)
{
  var q = {};
  var pairs = qs.split('&');
  for (var idx in pairs) {
    var arg = pairs[idx].split('=');
    q[arg[0]] = arg[1];
  }
  return q;
}

function startHashListener()
{
  hashListener = setInterval(checkIfHashChanged, 1000);
}

function stopHashListener()
{
  if (hashListener != null)
    clearInterval(hashListener);
  hashListener = null;
}

function getHashQuery()
{
  return location.hash.replace(/^#/, '');
}

var hashListener = null;
var hashValue    = '';//getHashQuery();
startHashListener();
1
Eugene Kerner

Essayez simple et léger PathJS lib.

Exemple simple:

Path.map("#/page").to(function(){
    alert('page!');
});
1
Nikita Koksharov