URL-Abfrageparameter in Javascript hinzufügen oder aktualisieren

[ad_1]

Erstellen Sie die folgende Funktion in Javascript, um URL-Abfrageparameter hinzuzufügen oder zu aktualisieren.

function addOrUpdateURLParam (key, value) {
    const searchParams = new URLSearchParams(window.location.search)
    searchParams.set(key, value)
    const newRelativePathQuery = window.location.pathname + "?" + searchParams.toString()
    history.pushState(null, "", newRelativePathQuery)
}

Wenn Sie nun die URL hinzufügen oder aktualisieren möchten, rufen Sie die Funktion einfach wie folgt auf:

addOrUpdateURLParam("name", "adnan-tech.com")

Der erste Parameter ist der Schlüssel des Parameters und der zweite der Wert.

window.location.search: gibt alle Abfrageparameter zurück, beginnend mit „?“.

URLSearchParams: Dadurch wird eine Instanz von URLSearchParams erstellt, die zum Bearbeiten von URL-Abfrageparametern verwendet wird.

searchParams.set(Schlüssel, Wert): Dadurch wird der in den Argumenten bereitgestellte Schlüsselwert festgelegt, aber noch nicht in der URL angezeigt.

window.location.pathname: Es gibt den relativen Pfad zurück, beginnend mit „/your_website“. Die Abfrageparameter, die mit „?“ beginnen, sind NICHT enthalten.

searchParams.toString(): Konvertiert alle Schlüssel-Wert-Paare in eine Zeichenfolge. Wenn mehrere Parameter festgelegt werden, werden diese durch das „&“-Zeichen getrennt.

History.pushState: Zeigt tatsächlich die Abfrageparameter in der URL an.

Der erste Parameter der Funktion „history.pushState“ ist der „state“. Es kann ein Push, Pop oder Null sein. Der zweite Parameter wird nicht mehr verwendet, aber auch nicht entfernt. Die Übergabe einer leeren Zeichenfolge ist sicher. Der dritte Parameter ist die neue URL. Hier übergeben wir unsere neue String-Variable, um die neue URL mit Abfrageparametern festzulegen. Weitere Informationen finden Sie hier Hier.

Videoanleitung:

Ich hoffe, dass Sie im Anschluss an dieses Tutorial in der URL Ihrer Website mithilfe von Javascript Abfrageparameter hinzufügen oder aktualisieren können. Wenn es hilft, schauen Sie sich unsere Tutorials an Javascript.


Beitragsaufrufe: 20

[ad_2]

Schlagwörter: , , , ,