Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Okt 2008
Das location-Objekt
Das location-Objekt enthält den vollständigen URI (Universal Resource Identifier – z.B. http://farbe.wisotop.de/index.shtml) eines Window-Objekts – in den meisten Fällen ist das die Adresse einer Seite im Internet. Wenn kein spezielles Window-Objekt angegeben ist, enthält location den URI des aktuellen Window-Objekts. Alle Eigenschaften des Location-Objekts sind Strings, die Komponenten des URI darstellen. Dieser URI hat die generelle Form
<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]
Eigenschaften und Methoden des location-Objekts
| Eigenschaft | Beschreibung |
|---|---|
hash |
ein String, der mit einem Hash-Zeichen beginnt und einen Ankernamen in der HTTP-URI angibt <h2><a id="header0"></a>Objekte versus einfache Datentypen</h2>URI ist http://wisotop.de/jsb/jsLocation.shtml#header0 var anker = window.location.hash; |
host |
ein String aus dem Hostnamen und der Portnummerwisotop.de:80 |
hostname |
der Name des Servers, der Subdomaine oder Domainname (oder IP-Adresse) eines URI. |
href |
ein String, der den vollständige URI enthält und damit auch alle anderen Eigenschaften als Substring. |
pathname |
Ein Teilstring der URI, der den Pfadnamen zur angegeben Resource enthält. |
port |
Die Portnummer für die Kommunikation mit dem Server. |
protocol |
Das verwendete Protokoll, das am Anfang des URI steht, mitsamt dem ersten Doppelpunkt (:) – z.B. http (wenn die Webseite von einem Server abgerufen wird), https für sicher verschlüsselte Seite oder file (wenn die Webseite lokal gespeichert ist). |
search |
Ein String, der mit einem Fragezeichen beginnt und den Query-String eines HTTP-URI angibt. |
| Methode | Beschreibung |
|---|---|
reload() |
erzwingt ein Reload des aktuellen Dokuments im Fenster |
replace() |
ersetzt das aktuelle Dokument mit der angegebenen URL. Nach dem Ersetzen ist der alte URI aus der History getilgt und der Zurück-Button des Browsers führt nicht zum vorangegangenen URI. |
Muster
Ein location-Objekt wird einfach durch die Zuweisung eines URI zum location-Objekt erzeugt
window.location = "file:///Users/haessler/Sites/somepage.html";
oder
window.location = "http://www.google.de";
Der Aufruf weist den Browser an, sofort zum angegebenen URi zu navigieren.
Eigenschaften des location-Objekts anzeigen
Das Absenden des Formulars löst die Anzeige des location-Objekts aus
<form action="jsLocation.shtml" method="get" id="jslocF1">
<fieldset><label for="jslocAnzeigen">
<input type="submit" value="location-Objekt anzeigen" id="jslocAnzeigen" />
</label></fieldset>
</form>
Das Skript
Die Funktion initLoc fängt lediglich das Absenden des Formular ab und ruft showLocation auf.
addEvent(window, 'load', initLoc);
function initLoc()
{
var jslocF1 = document.getElementById('jslocF1');
jslocF1.onsubmit = showLocation;
}
showLocation prüft zuerst, ob bereits ein PRE-Element mit der id F1 existiert und falls ja, wird es gelöscht, um eine doppelte Anzeige zu verhindern.
function showLocation()
{
var pre;
if (document.getElementById('F1')) {
pre = document.getElementById('F1');
pre.parentNode.removeChild(pre);
}
pre = document.createElement('pre');
pre.setAttribute('id','F1');
var text = document.createTextNode(
"window.location: " + window.location + "\n" +
"window.location.hash: " + window.location.hash + "\n" +
"window.location.host: " + window.location.host + "\n" +
"window.location.href: " + window.location.href + "\n" +
"window.location.hostname: " + window.location.hostname + "\n" +
"window.location.pathname: " + window.location.pathname + "\n" +
"window.location.port: " + window.location.port + "\n" +
"window.location.protocol: " + window.location.protocol + "\n" +
"window.location.search: " + window.location.search + "\n");
pre.appendChild(text);
var jslocF1 = document.getElementById('jslocF1');
jslocF1.parentNode.insertBefore(pre, jslocF1.nextSibling);
return false;
}
showLocation erzeugt einen Textknoten mit den Eigenschaften des location-Objekts des aktuellen Fensters und hängt den Textknoten durch die Anweisung jslocF1.parentNode.insertBefore(pre, jslocF1.nextSibling); in einem PRE-Element hinter dem Formular ein. Die Anweisung return false; am Ende verhindert, dass die ursprüngliche Aktion, die Übermittlung der Daten an die URL des action-Attributs, durchgeführt wird.