Location
Das „location“-Objekt
Das „location“-Objekt beinhaltet Informationen zur aktuell in einem Browserfenster verwendeten URL (Uniform Resource Locator). Eine URL besteht dabei aus verschiedenen Bausteinen, die über das „location“-Objekt angesprochen werden können. Die folgende Abbildung zeigt den typischen Aufbau einer URL:
Eigenschaften des „location“-Objekts
Die wichtigsten Eigenschaften des „location“-Objekts:
- hash: Fragment einer URL ausgeben oder setzen
- host: Hostname und Portnummer einer URL ausgeben oder setzen
- hostname: Hostname einer URL ausgeben oder setzen
- href: Gesamte URL ausgeben oder setzen
- origin: Protokoll, Hostname und Portnummer ausgeben
- pathname: Pfadnamen einer URL ausgeben oder setzen
- port: Portnummer einer URL ausgeben oder setzen
- protocol: Protokoll einer URL ausgeben oder setzen
- search: Abfrage-Zeichenkette einer URL lesen oder setzen
Im folgenden Beispiel werden alle Eigenschaften des „location“-Objekts ausgegeben:
HTML-Datei:
Ergebnis:
Beispiel 1
location.hash =
location.host =
location.hostname =
location.href =
location.origin =
location.pathname =
location.port =
location.protocol =
location.search =
Im folgenden Beispiel wird durch das Setzen der Eigenschaft „href“, die URL des Browserfensters geändert:
HTML-Datei:
Ergebnis:
Beispiel 2
Hinweis: Eine vollständige Liste der Eigenschaften des „window“-Objekts ist auf der Seite The Location Object verfügbar!
Methoden des „location“-Objekts
Die Methoden des „location“-Objekts:
-
assign(): Einer Webseite eine URL zuweisen
-
reload(): Die aktuelle Webseite neu laden
-
replace(): Die URL einer Webseite ersetzen
Mit der Methode „assign()“ kann einer Webseite eine URL zugewiesen werden. Ist der Webseite eine URL zugewiesen, kann die Zuweisung mit „assign()“ nicht geändert werden. Mit der Methode „replace()“ kann einer Webseite eine neue URL zugewiesen werden. Mit der Methode „reload()“ kann eine Webseite neu geladen (aktualisiert) werden:
HTML-Datei:
Ergebnis:
Beispiel 3
Hinweis: Eine vollständige Liste der Methoden des „window“-Objekts ist auf der Seite The Location Object verfügbar!
Abschlussübung
Als Abschlussübung kannst du folgendes Beispiel erstellen, das eine Erweiterung von Beispiel 3 ist. Dabei öffnet die Seite aber gleich mit der in der ComboBox ausgewählten URL. Wird eine andere URL aus der ComboBox ausgewählt, aktualisiert sich die Seite automatisch. Mit „Kopieren“ bekommt die geöffnete Seite die selbe URL wie die öffnende Seite. Unter der ComboBox wird die URL der Seite angezeigt, auf der sich die Buttons und die ComboBox befinden:
Beispiel 4
location.href =
Gehe dabei wie folgt vor:
- Kopiere das Beispiel 3 und entferne die unteren drei Button
- Füge den Button „Kopieren“ und das „span“-Element zum Anzeigen der URL der Basisseite ein
- Gebe dem „select“-Element das „onchange“-Attribut, das auf eine Funktion verweist
- Lese in dieser Funktion die aktuelle ausgewählte URL aus der ComboBox aus und setze die URL der geöffneten Seite auf diese URL
- Rufe die Funktion auch von der Funktion zum Öffnen der Seite aus auf, so dass beim Öffnen einer Seite, diese auf die entsprechende URL aus der ComboBox gesetzt wird
Die Lösung kannst du dir hier herunterladen:
