w3schools onpopstate net navegador evento detectar deshabilitar capturar boton atras asp actualizar javascript ajax navigation fragment-identifier hashchange

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



pushstate w3schools (7)

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

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.

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

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.

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 !

Pruebe la sencilla y ligera PathJS lib.

Ejemplo simple:

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