Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die URL-API ist ein Bestandteil des URL-Standards, der definiert, was einen gültigen Uniform Resource Locator ausmacht und bietet eine API zum Zugriff auf und zur Manipulation von URLs. Der URL-Standard definiert auch Konzepte wie Domains, Hosts und IP-Adressen und versucht, den veralteten MIME-Typ application/x-www-form-urlencoded in standardisierter Form zu beschreiben, der verwendet wird, um die Inhalte von Webformularen als Satz von Schlüssel/Wert-Paaren einzureichen.
Der größte Teil des URL-Standards besteht aus der Definition einer URL und deren Strukturierung und Parsen. Auch Definitionen verschiedener Begriffe im Zusammenhang mit der Adressierung von Computern in einem Netzwerk werden behandelt, und die Algorithmen zum Parsen von IP-Adressen und DOM-Adressen sind spezifiziert. Für die meisten Entwickler ist die API selbst am interessantesten.
Das Erstellen eines URL-Objekts für eine gegebene URL parst die URL und bietet schnellen Zugriff auf ihre enthaltenen Teile über ihre Eigenschaften.
js
let addr =newURL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");let host = addr.host;let path = addr.pathname;
Das obige Snippet erstellt ein URL-Objekt für den Artikel, den Sie gerade lesen, und ruft dann die Eigenschaften host und pathname ab. In diesem Fall sind diese Strings developer.mozilla.org und /de/docs/Web/API/URL_API.
Die meisten Eigenschaften der URL sind veränderbar; Sie können neue Werte zu ihnen schreiben, um die von dem Objekt dargestellte URL zu ändern. Zum Beispiel, um eine URL zu erstellen und deren Benutzername festzulegen:
js
let myUsername ="some-guy";let addr =newURL("https://example.com/login");
addr.username = myUsername;
Das Setzen des Wertes von username setzt nicht nur den Wert dieser Eigenschaft, sondern aktualisiert die gesamte URL. Nach der Ausführung des obigen Code-Snippets ist der von href zurückgegebene Wert https://some-guy@example.com/login. Dies gilt für alle beschreibbaren Eigenschaften.
Die search-Eigenschaft einer URL enthält den Abfragezeichenfolgen-Teil der URL. Wenn die URL zum Beispiel https://example.com/login?user=some-guy&page=news ist, ist der Wert der search-Eigenschaft ?user=some-guy&page=news. Sie können auch die Werte einzelner Parameter mit der get()-Methode des URLSearchParams-Objekts abrufen:
js
let addr =newURL("https://example.com/login?user=some-guy&page=news");try{loginUser(addr.searchParams.get("user"));gotoPage(addr.searchParams.get("page"));}catch(err){showErrorMessage(err);}
Zum Beispiel im obigen Snippet werden der Benutzername und die Zielseite aus der Abfrage entnommen und an die entsprechenden Funktionen weitergegeben, die vom Code der Website verwendet werden, um den Benutzer anzumelden und zu seiner gewünschten Zielseite innerhalb der Website zu leiten.
Andere Funktionen innerhalb von URLSearchParams ermöglichen es Ihnen, den Wert von Schlüsseln zu ändern, Schlüssel und deren Werte hinzuzufügen und zu löschen und sogar die Liste der Parameter zu sortieren.
Wenn Sie die in einer URL enthaltenden Parameter verarbeiten möchten, könnten Sie dies manuell tun, doch es ist viel einfacher, ein URL-Objekt dafür zu erstellen. Die Funktion fillTableWithParameters() unten nimmt ein HTMLTableElement-Objekt, das ein <table> darstellt, als Eingabe. Der Tabelle werden Zeilen hinzugefügt, eine für jeden in den Parametern gefundenen Schlüssel, wobei die erste Spalte den Namen des Schlüssels enthält und die zweite Spalte den Wert hat.
Beachten Sie den Aufruf von URLSearchParams.sort(), um die Parameterliste zu sortieren, bevor die Tabelle generiert wird.
Tip: you can click/tap on a cell for more information.
Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.