volver - ¿Cómo capturar el botón atrás/adelante del navegador, hacer clic en evento o cambiar el evento hash en javascript?

pushstate w3schools

Question

Quiero alert() cuando se hace clic en el botón de retroceso o avance del navegador o se cambia el hash en JavaScript. He intentado con esta solución y está funcionando pero está causando problemas en otros enlaces de la página web y presentando cada solicitud dos veces en cualquier evento de clic de enlace.

¿Hay alguna solución para capturarlo sin usar la función setInterval() ? ¿De modo que necesito capturar el cambio de hash o el evento de clic de botón hacia atrás / adelante ? Necesito un código / función / propiedad de JavaScript simple que debería funcionar en todos los navegadores modernos.

Alguna solución ?

Gracias

Answer 1

No es Buena idea

¿Puedes explicar el razonamiento detrás de esto? Todos hemos seguido este camino de prevención de retrocesos / adelantos y similares, y hemos tenido problemas con la funcionalidad del navegador.

Sin embargo, resulta mejor obedecer al navegador y escribir su aplicación de esa manera, por lo que estas cosas se vuelven irrelevantes. Y también es cierto que los navegadores están bloqueando más y más cosas para las aplicaciones javascript de los clientes, por lo que es muy probable que su aplicación falle después de (pocas) actualizaciones del navegador.

Ir con HTML5

Las especificaciones del historial HTML5 pueden ser exactamente lo que buscas. Es la forma en que las cosas deberían funcionar y hacerse con respecto a las aplicaciones Ajax y la funcionalidad de navegación hacia atrás / adelante del navegador. Sugiero que lo revises. Vea una demostración funcional que hace esto bastante bien.

Answer 2

¿Es esto para hash o para redirección? ¿Que estás tratando de hacer? Este tipo de acción suele ser muy intrusivo.

Es posible que desee probar el evento "onbeforeunload" para este javascript antes de salir de la página

Editado

En realidad, el enlace que proporcionas es bastante preciso.

var hash = location.hash;

setInterval(function()
{
   if (location.hash != hash)
   {
       hashUpdatedEvent(hash);
   }
}, 100);

function hashUpdatedEvent(hash)
{
     switch(...);
}

Su problema de acción duplicada de enlace se corregirá si cambia

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   doWhatever();
   location.hash = ''somethingwasdone'';
}

function hashUpdatedEvent(hash)
{
     if(hash == ''somethingwasdone'')
     {
         doWhatever();
     }
}

Simplemente (actualice el hash y deje que el "evento" maneje la acción):

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   location.hash = ''somethingwasdone'';
}

function hashUpdatedEvent(hash)
{
     if(hash == ''somethingwasdone'')
     {
         doWhatever();
     }
}

Answer 3

Creo que esta es la respuesta que Robert Koritnik estaba buscando, la encontré aquí: https://developers.google.com/tv/web/articles/location-hash-navigation

Hay un evento (window.onhashchange) que se activa cada vez que se actualiza o cambia el hash de ubicación, por lo que todo lo que tiene que hacer es configurar un controlador de eventos que use JavaScript para escuchar este evento y ejecutar código basado en el hash. Esto es básicamente cómo se hace:

function getLocationHash() {
  return window.location.hash.substring(1);
}
window.onhashchange = function(e) {
  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;
  }
}

Lo tengo trabajando en mi sitio: http://www.designhandler.com

Es todo contenido que cambia dinámicamente. Todavía no hay ajax, pero cuando haya terminado, lo será. Todavía uso 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.