Modifier une chaîne de requête sans recharger la page

Je crée une galerie de photos et je souhaite pouvoir modifier la chaîne de requête et le titre lors de la navigation sur les photos.

Le comportement que je recherche est souvent vu avec certaines implémentations de page continue / infinie, où pendant que vous faites défiler la chaîne de requête continue d'incrémenter le numéro de page ( http://x.com?page=4 ) etc. Cela devrait être simple en théorie, mais j'aimerais quelque chose de sûr sur les principaux navigateurs.

J'ai trouvé ce super article et j'essayais de suivre l'exemple avec window.history.pushstate, mais cela ne semble pas fonctionner pour moi. Et je ne sais pas si c'est idéal car je ne me soucie pas vraiment de modifier l'historique du navigateur.

Je veux juste pouvoir offrir la possibilité de mettre en signet la photo actuellement affichée, sans recharger la page à chaque fois que la photo est modifiée.

Voici un exemple de page infinie qui modifie la chaîne de requête: http://tumbledry.org/

UPDATE a trouvé cette méthode:

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

cela semble fonctionner pour moi, mais je suis sur un nouveau chrome .. cela causerait probablement des problèmes avec les anciens navigateurs?

Si vous recherchez une modification de hachage, votre solution fonctionne correctement. Cependant, si vous souhaitez modifier la requête, vous pouvez utiliser pushState, comme vous l'avez dit. Voici un exemple qui pourrait vous aider à le mettre en œuvre correctement. J'ai testé et cela a bien fonctionné:

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

Il ne recharge pas la page, mais il vous permet uniquement de modifier la requête URL. Vous ne pourrez pas modifier le protocole ou les valeurs d'hôte. Et bien sûr, cela nécessite des navigateurs modernes capables de traiter l'API HTML5 History.

Pour plus d'informations:

http://diveintohtml5.info/history.html

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

Sur la base de la réponse de Fabio, j'ai créé deux fonctions qui seront probablement utiles à quiconque tombe sur cette question. Avec ces deux fonctions, vous pouvez appeler insertParam()avec une clé et une valeur comme argument. Il ajoutera le paramètre URL ou, si un paramètre de requête existe déjà avec la même clé, il changera ce paramètre en la nouvelle valeur:

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

J'ai utilisé la bibliothèque JavaScript suivante avec beaucoup de succès:

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

Il prend en charge l'API d'historique HTML5 ainsi qu'une méthode de secours (utilisant #) pour les anciens navigateurs.

Cette bibliothèque est essentiellement un polyfill autour de `history.pushState '.

Je souhaite améliorer la réponse de Fabio et créer une fonction qui ajoute une clé personnalisée à la chaîne d'URL sans recharger la page.

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

Alors l'API d'historique est exactement ce que vous recherchez. Si vous souhaitez également prendre en charge les navigateurs hérités, recherchez une bibliothèque qui se rabat sur la manipulation de la balise de hachage de l'URL si le navigateur ne fournit pas l'API d'historique.