Modificación de una cadena de consulta sin necesidad de recargar la página

Question

Estoy creando una galería de fotos, y me gustaría ser capaz de cambiar la cadena de consulta y el título cuando las fotos se navegan.

El comportamiento que estoy buscando a menudo se ve con algunas implementaciones de página continua/infinita, donde mientras se desplaza hacia abajo la cadena de consulta sigue incrementando el número de página (http://x.com?page=4) etc. Esto debería ser simple en teoría, pero quisiera algo que sea seguro para los principales navegadores.

Encontré this great post, y estaba tratando de seguir el ejemplo con window.history.pushstate, pero eso no parece funcionar para mí. Y no estoy seguro de si es ideal porque realmente no me importa modificar el historial del navegador.

Solo quiero poder ofrecer la posibilidad de marcar la foto que se ve actualmente, sin volver a cargar la página cada vez que se cambia la foto.

Aquí es un ejemplo de página de infinito que modifica la cadena de consulta: http://tumbledry.org/

ACTUALIZACIÓN encontrado este método:

window.location.href = window.location.href + '#abc'; 

parece funcionar para mí, pero estoy en un nuevo cromo. .probablemente causaría algunos problemas con los navegadores más antiguos?

Answer 1

Si está buscando la modificación de Hash, su solución funciona bien. Sin embargo, si desea cambiar la consulta, puede usar el estado push, como dijo. Aquí hay un ejemplo que podría ayudarlo a implementarlo correctamente. Yo probé y funcionó bien:

if (history.pushState) { 
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1'; 
    window.history.pushState({path:newurl},'',newurl); 
} 

No vuelva a cargar la página, pero sólo se le permite cambiar la consulta URL. No podría cambiar el protocolo o los valores del host. Y, por supuesto, requiere navegadores modernos que puedan procesar la API de historial de HTML5.

Para más información:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Luego, la API de historial es exactamente lo que está buscando. Si también desea admitir navegadores heredados, busque una biblioteca que recurra a la manipulación de la etiqueta hash de la URL si el navegador no proporciona la API de historial.

Answer 3

he utilizado la siguiente biblioteca de JavaScript con gran éxito:

https://github.com/balupton/jquery-history

Es compatible con la API de la historia de HTML5, así como un método de respaldo (usando #) para navegadores antiguos.

Esta biblioteca es esencialmente un polyfill alrededor de `history.pushState '.

Answer 4

edificio fuera de la respuesta de Fabio, he creado dos funciones que probablemente serán útiles para cualquier persona tropezar con esta pregunta. Con estas dos funciones, puede llamar al insertParam() con una clave y un valor como argumento.Se puede añadir el ajuste de parámetros URL o, si un parámetro de consulta ya existe con la misma clave, que va a cambiar ese parámetro para el nuevo valor:

//function to remove query params form a url 
function removeURLParameter(url, parameter) { 
    //prefer to use l.search if you have a location/link object 
    var urlparts= url.split('?'); 
    if (urlparts.length>=2) { 

     var prefix= encodeURIComponent(parameter)+'='; 
     var pars= urlparts[1].split(/[&;]/g); 

     //reverse iteration as may be destructive 
     for (var i= pars.length; i-- > 0;) {  
      //idiom for string.startsWith 
      if (pars[i].lastIndexOf(prefix, 0) !== -1) { 
       pars.splice(i, 1); 
      } 
     } 

     url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ""); 
     return url; 
    } else { 
     return url; 
    } 
} 

function insertParam(key, value) { 
    if (history.pushState) { 
     // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1'; 
     var currentUrl = window.location.href; 
     //remove any param for the same key 
     var currentUrl = removeURLParameter(currentUrl, key); 

     //figure out if we need to add the param with a ? or a & 
     var queryStart; 
     if(currentUrl.indexOf('?') !== -1){ 
      queryStart = '&'; 
     } else { 
      queryStart = '?'; 
     } 

     var newurl = currentUrl + queryStart + key + '=' + value 
     window.history.pushState({path:newurl},'',newurl); 
    } 
}