Detección de botón Atrás/Hash Cambio en la URL

Question

Acabo de configurar mi nueva página de inicio en http://ritter.vg. Estoy usando jQuery, pero muy poco.
Carga todas las páginas usando AJAX - Lo tengo configurado para permitir marcadores al detectar 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 los botones de retroceder y avanzar funcionen.

¿Hay alguna manera de detectar cuándo se ha presionado el botón Atrás (o detectar cuándo cambia el hash) sin usar un loop setInterval? Cuando probé ésos con tiempos de espera de .2 y 1 segundo, fijó mi CPU.

Answer 1

Utilice el complemento jQuery hashchange event en su lugar. En cuanto a su navegación ajax completa, intente tener SEO friendly ajax. De lo contrario, sus páginas no mostrarán nada en los navegadores con limitaciones de JavaScript.

Answer 2

jQuery BBQ (Back Button & Query Library)

Un plugin historial del navegador basado en hash de alta calidad y mucho up-to-date (Jan 26, 2010) as of this writing (jQuery 1.4.1).

Answer 3

Otra gran implementación es jQuery History de balupton que utilizará el evento onhashchange nativo si es compatible con el navegador, si no utilizará un iframe o intervalo de tiempo apropiado para el navegador para asegurar que toda la funcionalidad esperada se emule con éxito. También proporciona una interfaz agradable para enlazar a ciertos estados.

Otro proyecto digno de mención es jQuery Ajaxy, que es una extensión bastante para el historial de jQuery para agregar ajax a la mezcla. ¡Como cuando comienzas a usar ajax con hashes obtiene quite complicated!

Answer 4

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

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

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

Answer 5

hago lo siguiente, si desea utilizarlo luego pegarlo en algún lugar y establecer su código de controlador en locationHashChanged (cs), donde comentado, y luego llama a changeHashValue (hashQuery) cada vez que cargas una solicitud de Ajax. No es una respuesta rápida y no hay ninguna, por lo que tendrá que pensar en ello y pasar argumentos razonables de hashQuery (es decir, a = 1 & b = 2) para cambiarHashValue (hashQuery) y luego atender cada combinación de dichos argumentos en su (QS) de devolución de llamada locationHashChanged ...

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

Trate sencilla & ligera PathJS lib.

ejemplo simple:

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

Answer 7

Las respuestas aquí son todos bastante antiguo.

En el mundo de HTML5, debe utilizar el evento onpopstate.

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

Este último fragmento permite que existan múltiples controladores de eventos, mientras que el primero reemplazará cualquier controlador existente que puede causar difíciles de encontrar errores.