javascript - paginas - jquery load php

Modificando una cadena de consulta sin recargar la página

Question

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

El comportamiento que busco se ve a menudo con algunas implementaciones de página continua / infinita, donde mientras se desplaza hacia abajo, la cadena de consulta aumenta el número de página ( http://x.com?page=4 ) etc. Simple en teoría, pero me gustaría algo que sea seguro en los principales navegadores.

Encontré esta excelente publicación 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 vista actualmente, sin tener que volver a cargar la página cada vez que se cambia la foto.

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

ACTUALIZACIÓN encontrado este método:

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

Parece que funciona para mí, pero estoy en un nuevo chrome ... ¿probablemente causaría algunos problemas con navegadores más antiguos?

Answer 1

Aprovechando la respuesta de Fabio, creé dos funciones que probablemente serán útiles para cualquiera que se encuentre con esta pregunta. Con estas dos funciones, puede llamar a insertParam() con una clave y un valor como argumento. Agregará el parámetro URL o, si ya existe un parámetro de consulta con la misma clave, cambiará ese parámetro al 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);
}
}

Answer 2

Entonces la API de historial es exactamente lo que estás 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 del historial de HTML5, así como con un método alternativo (usando #) para los navegadores más antiguos.

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

Answer 4

Si está buscando una modificación Hash, su solución funciona bien. Sin embargo, si desea cambiar la consulta, puede usar el pushState, como dijo. Aquí hay un ejemplo que puede ayudarte a implementarlo correctamente. Lo 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 vuelve a cargar la página, pero solo le permite cambiar la consulta de 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 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