Javascript/jQuery detectar cambio de hash solo en el botón de navegación hacia atrás/adelante clic

Question

¿Es posible detectar el hashchange solo en un cambio de historial del navegador (es decir, botón Atrás o Adelante)?

He visto el evento onBeforeUnload, pero este evento no se activa en el cambio de hash, ya que la ventana no se está descargando.

El evento hashchange obviamente se dispara cada vez que cambia el hash. ¿Alguna solución? Preferiblemente sin un plugin. He visto el plugin jQuery history, pero estoy buscando la solución más simple.

Gracias por la ayuda.

Answer 1

Eche un vistazo al evento window.onhashchange.

Sin embargo, actualmente no es compatible con todos los navegadores. Eche un vistazo al complemento jQuery Hash Change de BA here. Puede funcionar, si elige usar un complemento al final.

Espero que esto ayude!

Answer 2

No puede hacer esto con hashes, o incluso con la API de historial de HTML5. No hay eventos asociados exclusivamente con el usuario al hacer clic en los botones hacia atrás o hacia adelante. Probablemente necesite un enfoque diferente al problema original, a menos que sea factible instalar algún tipo de extensiones o tal en una máquina cliente.

Answer 3

Tengo una recomendación para un enfoque diferente. Digamos que tienes un enlace que va a alguna página (pero usa AJAX sin actualizar). Cuando se hace clic en ese enlace, cambia el hash a lo que desee. Ahora, cuando el usuario hace clic en el botón Atrás, el hash vuelve a ser lo que era originalmente antes de que el usuario haga clic en el vínculo ... pero lo que se puede hacer es verificar si se activó un clic en un enlace o botón (o lo que sea) selector/evento que desea verificar). Si se disparó, sabrá que la solicitud proviene de un clic en la página. Si no se activaron los eventos que está comprobando, sabrá que el clic provino del botón Atrás o Adelante.

Otra cosa que podría hacer es añadir un sufijo al hash cuando cambie (desde el botón de retroceso o avance basado en la comprobación de los eventos que se activan). Por lo tanto, si tuviera un hash de #pageTitle, lo convertiría en #pageTitle_chrome para indicar que el hash fue cambiado desde el botón Atrás o Atrás.

Luego, cuando compruebe sus valores hash, podría ver si contiene _chrome para detectar qué tipo de cambio hash fue.

Answer 4

Lo que creo que Chris estaba pidiendo es una forma de que el evento window.onhashchange funcione solo cuando se está navegando a través de los botones del historial del navegador (atrás/adelante).

Respuesta = No ... pero puede poner una si en la función.
Me gustaría hacer esto:

$('.nav').click(function() { //on the onclick event for your nav add a class 
    $(this).addClass('navClick'); // before you change the hash. 
    window.location.hash = 'state' + $(this).html(); 
}); 
function getLocationHash() { 
    return window.location.hash.substring(1); 
} 
window.onhashchange = function(e) { // if element does not exist with your 
    if ($('.navClick').length == 0) { // 'navClick' class then check hash 
    switch(getLocationHash()) { 
     case 'state1': 
     execute code block 1; 
     break; 
     case 'state2': 
     execute code block 2; 
     break; 
     default: 
     code to be executed if different from case 1 and 2; 
    } 
    } else {       // removes the class if it does 
    $('.navClick').removeClass('navClick'); 
    } 
}; 

hice algo similar sobre my site

Todo está cambiando dinámicamente el contenido. Sigo usando el window.location.hash para realizar un seguimiento de los estados del sitio. Si navega por el sitio y luego comienza a usar los botones retroceder para navegar una vez que el sitio está en la historia, cambiará los estados dinámicamente, como si el usuario estuviera haciendo clic en el navegador, en lugar de tener que volver a cargar la página. Solo verifica el hash si está usando el historial para navegar.

Answer 5

Terminé marcando una bandera cada vez que se activó mi navegación, y si la bandera estaba marcada, el evento hashChange lo ignoraría, de lo contrario lo manejaría como si fuera un evento de retroceso/avance.