Cómo cancelar popState en ciertas condiciones

Question

El evento popState se activará cuando la URL haya cambiado (hacia atrás o hacia adelante). Y recientemente me he dado cuenta de que, por ejemplo, en http://www.example.com/:

<a href="#anchor">Top</a> 

también activará popState, haciendo que la página a "cargar".
¿Cómo puedo saber si es la misma URL y solo la parte # ha cambiado?

$(window).bind("popstate",function(){ 
    swap(location.href); 
}) 

En el ejemplo, al hacer clic en el enlace "Inicio" (véase más arriba), la página se destinarán a #anchor, sino que también se activará popState y causa recarga, que es que no espero.

Answer 1

Puede consultar window.location.hash para ver qué tipo de ancla se le ha añadido # y tomar la medida correspondiente.

Además, al marcar window.onhashchange puede distinguir entre los cambios completos de URL en window.location.href o simplemente los cambios de hash.

Ejemplo:

window.onhashchange = function() 
{ 
    console.log('Hash change:' + window.location.hash); 
} 

Answer 2

no pude encontrar nada del caso para determinar si esto era sólo un cambio de anclaje, así que tuve que llevar un registro de yo mismo con un código como el siguiente:

function getLocation() { 
    return location.pathname + location.search; 
} 

var currentLocation = getLocation(); 

$(function() { 
    $(window).on("popstate", function() { 
    var newLocation = getLocation(); 
    if(newLocation != currentLocation) { 
     // DO STUFF 
    } 
    currentLocation = newLocation; 
    }); 
}) 

La ubicación se almacena sin el hash, por lo que cuando se apaga el estado emergente al hacer clic en el enlace con el anclaje, el método getLocation devolverá el mismo resultado que antes y el código para intercambiar la página no sucederá.

Para asegurarse de que mantener un registro de la ubicación actual correctamente, también es necesario actualizar la variable cada vez que cambie el estado con pushState() o replaceState()