web-dev-qa-db-fra.com

mettre à jour les paramètres dans l'URL avec history.pushState ()

J'utilise history.pushState pour ajouter quelques paramètres à l'URL de la page actuelle après avoir passé un appel AJAX sur ma page. Maintenant, sur la même page en fonction de l'action de l'utilisateur, je souhaite à nouveau mettre à jour l'URL de la page avec le même ensemble ou un ensemble supplémentaire de paramètres. Donc, mon code ressemble à ceci:

var pageUrl = window.location.href + "?" + queryString;
window.history.pushState('','',pageUrl);

queryString est ma liste de paramètres de requête.

Mais avec le code ci-dessus, mes paramètres sont ajoutés à l'URL avec les paramètres et ils se présentent comme ci-dessous après le deuxième appel AJAX:

http://sample.com?param1=foo&param2=bar&param1=foo,foo1&param2=bar&param3=another_foo

Les paramètres apparaissent donc deux fois dans l'URL. Existe-t-il un moyen de remplacer les paramètres dans l'URL avant de passer à l'historique ou à un autre meilleur moyen d'y parvenir en javascript (jQuery)?

javascriptjqueryajaxurl
16
Kush

Je pense que ce dont vous avez besoin est de supprimer window.location.href et de laisser '?' +.

var pageUrl = '?' + queryString;
window.history.pushState('', '', pageUrl);
14
yofferHorist

Cette fonction pourrait être utile

function updateUrlParameter(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

Edit : La solution suivante est plus simple et fonctionne aussi si le paramètre ne fait pas encore partie de l'URL. Cependant, il n’est pas supporté par Internet Explorer (vous ne dites pas?).

function setQueryStringParameter(name, value) {
    const params = new URLSearchParams(location.search);
    params.set(name, value);
    window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${params}`));
}
7
tocqueville