it-swarm.com.de

aktualisierungsparameter in URL mit history.pushState ()

Ich verwende history.pushState, um ein paar Params an die URL der aktuellen Seite anzuhängen, nachdem auf meiner Seite ein Aufruf AJAX ausgeführt wurde. Jetzt auf derselben Seite, basierend auf der Benutzeraktion, möchte ich die Seiten-URL erneut mit demselben oder zusätzlichen Satz von Parametern aktualisieren. Mein Code sieht also so aus:

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

queryString ist meine Liste von Abfrageparametern.

Aber mit dem obigen Code werden meine Params an die URL mit den Params angehängt und sie sehen wie folgt aus: second AJAX call:

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

Die Paramen erscheinen also zweimal in der URL. Gibt es eine Möglichkeit, die Params in der URL zu ersetzen, bevor Sie zur Historie oder zu einer anderen besseren Methode, um dies in Javascript (jquery) zu erreichen?

16
Kush

Ich denke, was Sie brauchen, ist window.location.href zu entfernen und '?' + zu verlassen.

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

Diese Funktion kann hilfreich sein

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 : Die folgende Lösung ist einfacher und funktioniert auch, wenn der Parameter noch nicht Teil der URL ist. Es wird jedoch nicht von Internet Explorer unterstützt (sagen Sie nicht?).

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