Differences

This shows you the differences between two versions of the page.

--- programmieren:javascript:url_mit_paramatern_aendern_und_laden [2022/01/31 20:19] – created jgehrke
+++ programmieren:javascript:url_mit_paramatern_aendern_und_laden [2022/12/17 12:28] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+====== Javascript: Browser URL mit GET Parametern ändern ======
+Dieser Code liest die Browser URL aus, trennt sie in Ihre Komponenten Server Host, Pfad/Path und GET Parametern. Einer der GET-Parameter wird neu gesetzt und die aktualisierte URL wird aufgerufen.
 <code javascript>
-const url_host   = window.location.origin;
+const url_host          = window.location.origin;            // https://www.domain.com/
-const url_path   = window.location.pathname;
+const url_path          = window.location.pathname;          // folder/subpage.php/
-      url_params.set( 'chat_postid', this.value );
+const url_search_string = window.location.search;            // ?parameter=true&other_param=1024
-const url_new_p  = url_params.toString();
+      url_params_object = new URLSearchParams( url_search_string ); // converts params to manipulatable object
-const new_url    = url_host + url_path + '?' + url_new_p;
+      url_params_object.set( 'other_param', 'new_value');    // change a parameter
+const url_params_string = url_params.toString();             // get paramaters as string
+const new_url           = url_host + url_path + '?' + url_params_string;
 window.location.replace( new_url );
 </code>
+**Hinweis:** nicht IE11 kompatibel, wegen URLSearchParams()
+**MDN Doku:**
+  * [[https://developer.mozilla.org/en-US/docs/Web/API/Window/location|window.location]]
+  * [[https://developer.mozilla.org/de/docs/Web/API/URLSearchParams|new URLSearchParams( url_search )]]

User Tools

Site Tools

Differences

Page Tools