Modifica di una stringa di query senza ricaricare la pagina

Question

Sto creando una galleria fotografica e vorrei poter modificare la stringa di query e il titolo quando si sfogliano le foto.

Il comportamento che sto cercando è spesso visto con alcune implementazioni di continuo pagina/infinito, in cui, mentre si scorrere verso il basso la stringa di query mantiene incrementare il numero di pagina (http://x.com?page=4) ecc .. Questo dovrebbe essere semplice, in teoria, ma io vorrebbe qualcosa che sia sicuro attraverso i principali browser.

Ho trovato this great post e stavo cercando di seguire l'esempio con window.history.pushstate, ma questo non sembra funzionare per me. E non sono sicuro se sia l'ideale perché non mi interessa davvero modificare la cronologia del browser.

Voglio solo essere in grado di offrire la possibilità di contrassegnare la foto attualmente visualizzata, senza ricaricare la pagina ogni volta che la foto viene cambiata.

Ecco un esempio di pagina di infinito che modifica query string: http://tumbledry.org/

UPDATE trovato questo metodo:

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

sembra funzionare per me, ma io sono su un nuovo Chrome. . probabilmente causerebbe alcuni problemi con i browser più vecchi?

Answer 1

Se si sta cercando la modifica di hash, la soluzione funziona correttamente. Tuttavia, se si desidera modificare la query, è possibile utilizzare il pushState, come hai detto. Ecco un esempio che potrebbe aiutarti a implementarlo correttamente. Ho provato e ha funzionato bene:

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

Non ricaricare la pagina, ma consente solo di modificare la query URL. Non sarebbe possibile modificare il protocollo oi valori dell'host. E ovviamente richiede browser moderni in grado di elaborare l'API di cronologia HTML5.

Per maggiori informazioni:

http://diveintohtml5.info/history.html

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

Answer 2

Quindi l'API di cronologia è esattamente quello che stai cercando. Se desideri supportare anche i browser legacy, cerca una libreria che ricada sulla manipolazione del tag hash dell'URL se il browser non fornisce l'API della cronologia.

Answer 3

Ho usato il seguente libreria JavaScript con grande successo:

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

sostiene l'API HTML5 storia così come un metodo di ripiego (usando #) per i browser più vecchi.

Questa libreria è essenzialmente un polyfill attorno a `history.pushState '.

Answer 4

Costruzione off di risposta di Fabio, ho creato due funzioni che probabilmente essere utile per chiunque inciampare su questa domanda. Con queste due funzioni, è possibile chiamare insertParam() con una chiave e un valore come argomento.Aggiungerà il parametro URL o, se esiste già una query param con la stessa chiave, cambierà quel parametro con il nuovo valore:

//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); 
    } 
}