javascript - onpopstate - Detectando el botón Atrás/Hash Cambio en URL

pushstate w3schools

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 atrás y adelante 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

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

Aunque la funcionalidad de estado HTML5 solo está disponible para 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í: History.js

Answer 2

Hago lo siguiente, si quieres usarlo, pégalo en algún lugar y configura el código de tu controlador en locationHashChanged (qs) donde se comentó, y luego llama a changeHashValue (hashQuery) cada vez que cargas una solicitud de AJAX. No es una respuesta rápida y no hay ninguna, así que tendrás 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 tu ubicaciónHashChanged (qs) devolución de llamada ...

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

Las respuestas aquí son todas bastante viejas.

En el mundo de HTML5, debe usar 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));
});

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

Answer 4

Otra gran implementación es el historial de jQuery 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 garantizar que toda la funcionalidad esperada se emule con éxito. También proporciona una interfaz agradable para enlazar a ciertos estados.

Otro proyecto que también vale la pena destacar es jQuery Ajaxy, que es una extensión bastante para jQuery History para agregar ajax a la mezcla. ¡Como cuando comienzas a usar ajax con hashes, es bastante complicado !

Answer 5

Pruebe la sencilla y ligera PathJS lib.

Ejemplo simple:

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

Answer 6

Utilice el complemento de evento jQuery hashchange en su lugar. Con respecto a su navegación ajax completa, intente tener ajax amigable con los motores de búsqueda . De lo contrario, sus páginas no mostrarán nada en los navegadores con limitaciones de JavaScript.

Answer 7

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

Un plugin de historial de navegación basado en hash de alta calidad y muy actualizado (26 de enero de 2010) al momento de escribir esto (jQuery 1.4.1) .