Wie ändere ich URL-Parameter dynamisch mit JavaScript?

Dynamische URL-Parametermanipulation mit JavaScript

JavaScript bietet vielseitige Möglichkeiten zum Ändern und Spezifizieren von URL-Parametern und ermöglicht Entwicklern die dynamische Kontrolle über Webseiten. Lassen Sie uns eine Technik erkunden, um diese Funktionalität zu erreichen.

Ändern vorhandener Parameter

Betrachten Sie die URL „site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc“. " Um den Parameterwert „rows“ beispielsweise auf 10 zu ändern, können wir den folgenden JavaScript-Code verwenden:

var newURL = updateURLParameter(window.location.href, 'rows', 10);

Die Funktion „updateURLParameter“ benötigt drei Parameter: die ursprüngliche URL, den Parameternamen („rows“). und der neue Wert (10). Es erstellt eine neue URL mit dem aktualisierten Parameter und gibt sie zurück.

Hinzufügen von Parametern

Wenn der Parameter „rows“ nicht vorhanden ist, können wir ihn dem hinzufügen Ende der URL mit der gleichen Funktion:

var newURL = updateURLParameter(window.location.href, 'rows', 10) || window.location.href + '&rows=10';

Der Code versucht zunächst, den vorhandenen Parameter „rows“ zu aktualisieren (falls vorhanden). Wenn es nicht vorhanden ist, wird „&rows=10“ an die URL angehängt.

Zusätzliche Überlegungen

Um den Status im Browserverlauf beizubehalten, können Sie verwenden die Funktion „replaceState“:

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

Das Obige aktualisiert die URL in der Adressleiste des Browsers und behält dabei den Verlauf bei.

Erweiterte Handhabung

Zur Unterstützung Bei URLs mit Ankern (z. B. „#meinZiel“) behandelt eine erweiterte Version des Codes Anker separat:

function updateURLParameter(url, param, paramVal) {
  // Handle anchors
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    var tmpAnchor = additionalURL.split("#");
    var TheParams = tmpAnchor[0];
    var TheAnchor = tmpAnchor[1];
    if (TheAnchor) additionalURL = TheParams;
    tempArray = additionalURL.split("&");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split("=")[0] != param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&amp;";
      }
    }
  }

  // Update/add parameter
  if (TheAnchor) paramVal += "#" + TheAnchor;
  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

Dadurch wird sichergestellt, dass Anker beim Ändern von URL-Parametern ordnungsgemäß verwaltet werden.

Das obige ist der detaillierte Inhalt vonWie ändere ich URL-Parameter dynamisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!