Détection du bouton précédent / changement de hachage dans l'URL

Question

Je viens de configurer ma nouvelle page d'accueil à l'adresse http://ritter.vg . J'utilise jQuery, mais de manière très minimale.
Il charge toutes les pages en utilisant AJAX - je l’ai configuré pour permettre la création de signets 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 ne parviens pas à faire fonctionner les boutons Précédent et Suivant.

Existe-t-il un moyen de détecter le moment où le bouton Précédent a été enfoncé (ou de détecter le changement de hachage) sans utiliser de boucle setInterval? Lorsque j’ai essayé ceux qui avaient des délais d’expérience de 0,2 et 1 seconde, mon processeur était indexé.

Answer 1

Utilisez plutôt le plug-in de l'événement jQuery hashchange . En ce qui concerne votre navigation ajax complète, essayez d’utiliser la optimisation du référencement ajax . Sinon, vos pages ne sont plus affichées dans les navigateurs avec des limitations JavaScript.

Answer 2

Les réponses 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 autorise l’existence de plusieurs gestionnaires d’événements, tandis que le premier remplace tout gestionnaire existant susceptible de provoquer des bogues difficiles à trouver.

Answer 3

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

Un plug-in d'historique de navigateur basé sur un hachage de haute qualité et beaucoup à jour (26 janvier 2010) à ce jour (jQuery 1.4.1) .

Answer 4

HTML5 a inclus une solution bien meilleure que celle de hashchange, à savoir les API de gestion d’état HTML5 - https: //developer.mozilla.org/fr/DOM/Manipulation_du_Browser_history - ils vous permettent de modifier l'URL de la page sans avoir à utiliser de hachage!

Bien que la fonctionnalité d’état HTML5 ne soit disponible que pour les navigateurs HTML5. Donc, vous voudrez probablement utiliser quelque chose comme History.js qui fournit une expérience rétro-compatible 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

Answer 5

Une autre excellente implémentation est Historique jQuery de balupton, qui utilisera l'événement natif onhashchange s'il est pris en charge par le navigateur, sinon, il utilisera une iframe ou un intervalle de manière appropriée 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 connecter à certains états.

Un autre projet à noter est jQuery Ajaxy , qui est une extension pour jQuery. Histoire d'ajouter ajax au mélange. Comme lorsque vous commencez à utiliser ajax avec hash, il obtient le assez compliqué !

Answer 6

Je fais ce qui suit, si vous voulez l'utiliser, puis collez-le dans un endroit 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 solution rapide et il n'y en a pas, vous devrez donc y réfléchir et passer des arguments sensibles hashQuery (c'est-à-dire a = 1 & b = 2) pour changerHashValue (hashQuery), puis prendre en compte chaque combinaison desdits arguments dans votre rappel locationHashChanged (qs) ...

// 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();

Answer 7

Essayez simple & amp; PathJS lib. légère

Exemple simple:

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