Modifica di una stringa di query senza ricaricare la pagina

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

Il comportamento che cerco è spesso visto con alcune implementazioni di pagina continua / infinita, dove mentre scorri verso il basso la stringa di query continua ad aumentare il numero di pagina ( http://x.com?page=4 ) ecc .. Questo dovrebbe essere semplice in teoria, ma vorrei qualcosa che sia sicuro per i principali browser.

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

Voglio solo essere in grado di offrire la possibilità di aggiungere ai segnalibri la foto attualmente visualizzata, senza ricaricare la pagina ogni volta che la foto viene modificata.

Ecco un esempio di pagina infinita che modifica la stringa di query: http://tumbledry.org/

UPDATE ha trovato questo metodo:

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

sembra funzionare per me, ma sono su un nuovo chrome .. probabilmente causerebbe alcuni problemi con i browser meno recenti?

Se stai cercando la modifica dell'hash, la tua soluzione funziona bene. Tuttavia, se desideri modificare la query, puoi utilizzare 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 ricarica la pagina, ma consente solo di modificare la query dell'URL. Non sarai in grado di modificare il protocollo oi valori dell'host. E, naturalmente, richiede browser moderni in grado di elaborare l'API 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

Partendo dalla risposta di Fabio, ho creato due funzioni che probabilmente saranno utili per chi si imbatte in questa domanda. Con queste due funzioni, puoi chiamare insertParam()con una chiave e un valore come argomento. Aggiungerà il parametro URL o, se esiste già un parametro di query con la stessa chiave, cambierà quel parametro con il nuovo valore:

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better 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 to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

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

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

Ho utilizzato la seguente libreria JavaScript con grande successo:

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

Supporta l'API della cronologia HTML5 e un metodo di fallback (utilizzando #) per i browser meno recenti.

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

Voglio migliorare la risposta di Fabio e creare una funzione che aggiunge una chiave personalizzata alla stringa dell'URL senza ricaricare la pagina.

function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}

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