Detección de botón de retroceso / cambio de hash en URL

Question

Acabo de configurar mi nueva página de inicio en http://ritter.vg . Estoy usando jQuery, pero de manera mínima.
Carga todas las páginas usando AJAX. Lo tengo configurado para permitir marcadores detectando el hash en la 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');

Pero no puedo hacer que funcionen los botones de avance y retroceso.

¿Hay alguna forma de detectar cuándo se presionó el botón de retroceso (o detectar cuándo cambia el hash) sin usar un bucle setInterval? Cuando los probé con tiempos de espera de .2 y 1 segundo, conectó mi CPU.

Answer 1

En su lugar, use el jQuery hashchange event . Con respecto a su navegación completa de ajax, intente tener ajax amigable para SEO . De lo contrario, sus páginas no muestran nada en los navegadores con limitaciones de JavaScript.

Answer 2

Las respuestas aquí son bastante antiguas.

En el mundo HTML5, debe usar onpopstate evento.

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

O:

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

El último fragmento de código permite que existan múltiples controladores de eventos, mientras que el primero reemplazará cualquier controlador existente que pueda causar errores difíciles de encontrar.

Answer 3

jQuery BBQ (Botón Atrás y Biblioteca de consultas)

Un plugin de historial de navegador basado en hash de alta calidad y mucho actualizado (26 de enero de 2010) a partir de este escrito (jQuery 1.4.1) .

Answer 4

HTML5 ha incluido una solución mucho mejor que el uso de hashchange, que son las API de administración de estado de HTML5 - https: //developer.mozilla.org/en/DOM/Manipulating_the_browser_history : ¡te permiten cambiar la url de la página, sin necesidad de utilizar hashes!

Aunque la funcionalidad de estado de HTML5 solo está disponible para navegadores HTML5. Por lo tanto, es probable que desee utilizar algo como History.js que proporciona una experiencia compatible con versiones anteriores a los navegadores HTML4 ( a través de hashes, pero aún admite datos y títulos, así como la funcionalidad replaceState).

Puedes leer más sobre esto aquí: https://github.com/browserstate/History.js

Answer 5

Otra gran implementación es jQuery History de balupton, que utilizará el evento nativo en el intercambio de hash si es admitido por el navegador, si no, utilizará un iframe o un intervalo adecuado para el navegador para garantizar que toda la funcionalidad esperada se emule correctamente. También proporciona una interfaz agradable para enlazar a ciertos estados.

Otro proyecto que vale la pena mencionar también es jQuery Ajaxy que es prácticamente una extensión para jQuery Historial para agregar ajax a la mezcla. Como cuando comienzas a usar ajax con hashes, obtienes bastante complicado !

Answer 6

Hago lo siguiente, si quieres usarlo, pégalo en algún lugar y configura el código del controlador en locationHashChanged (qs) donde comentó, y luego llama a changeHashValue (hashQuery) cada vez que cargues una solicitud de ajax. No es una respuesta rápida y no hay ninguna, por lo que deberá pensar en ella y aprobar argumentos hashQuery (es decir, a = 1 & amp; b = 2) para cambiarHashValue (hashQuery) y luego atender cada combinación de dichos argumentos en su locationHashChanged (qs) callback ...

// 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

Prueba simple & amp; peso ligero PathJS lib.

Ejemplo simple:

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