CSS, HTML und Javascript mit {stil}

window.navigator: Geolocation

Javascript Geolocation

Javascript window.navigator liefert Informationen über den Browser wie die Geolocation als Latitude und Longitude, ob Cookies beim Besucher aktiviert sind oder nicht mit cookieEnabled, ob die Seite online besucht wird oder im Cache liegt mit onLine, die eingestellte Sprache mit language und Informationen zum Browser selbst.

Die Angaben aus dem navigator-Objekt sind »read only« – können nur gelesen werden.

Was auf dem ersten Blick aussieht, es wäre eine Hilfe beim Erkennen des Browsers, enthält nur wenige zuverlässige Informationen. Verschiedene Browser können nahezu identische Namen anzeigen, einige Browser identifizieren sich nicht, um Tests zu entgehen oder die Statistik aufzumischen und die Version des Betriebssystems hinkt häufig hinterher.

Wenn doch einmal alle Browser so hormonisch wirken würden wie beim appCodeName! Ob IE, Opera, Safari oder Firefox: appCodeName ist immer Mozilla im stillen Gedenken an den Urvater aller grafischen Browser.

Geolocation

Die Geolocation ist die Basis für die Positionsbestimmung in mobilen Apps und unterliegen besonderen Vorkehrungen zur Wahrung der Privatsphäre. Wenn der Benutzer die Auskunft verweigert, kommt eine Fehlermeldung zurück. Der Browser muss beim Besucher rückfragen, bevor er die Daten – Longitude und Latitude – herausgeben darf.

Vorsichtshalber sollte geprüft werden, ob der Browser Geolocation unterstützt.

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation wird nicht unterstützt";
    }

Bei Desktop-Rechnern im Cityumfeld kann das WiFi zur Positionsbestimmung herangezogen werden und liefert bis auf 1000 Meter akkurate Daten. Ortsinformationen auf IP-Basis sind weniger exakt. Mobilgeräte gleichen die Signale von drei Satelliten im GPS zeitlich ab (Lateration / Trilateration) und können unter freiem Himmel bis auf 10 Meter genaue Standortdaten liefern.

var options = { 
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0 
};
navigator.geolocation.getCurrentPosition(success, error, options);
function success(pos) {
   var crd = pos.coords;
   var showgeo = document.getElementById('showgeo');
   showgeo.innerHTML = 'Aktuelle Position: <br>Latituide : ' + 
	                crd.latitude + '<br>Longitude : ' + 
	                crd.longitude + '<br>Mehr oder weniger auf ' + 
	                crd.accuracy + ' Meter.';
};

function error(error) {
	switch(error.code) {
        case error.PERMISSION_DENIED:
            showgeo.innerHTML = "Benutzer erlaubt keinen Zugriff auf Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            showgeo.innerHTML = "Ortsinformationen nicht verfügbar."
            break;
        case error.TIMEOUT:
            showgeo.innerHTML = "Timeout."
            break;
        case error.UNKNOWN_ERROR:
            showgeo.innerHTML = "Unbekannter Fehler."
            break;
        default:
}

Das ist alles einfach gehalten und erst das Google Maps JavaScript API bringt die Karte in den Browser (sogar mit Wunschfarben!).

Wer jetzt den Standort nicht als Latitude und Longitude braucht, sondern z.B. als »Köln«, »Frankfurt« oder »Venlo«, braucht etwas wie Reverse Geocoding (Address Lookup)

//maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452

Die Abfrage mit JSON bringt einen ganzen Schwung an Informationen. Einfach nur den Ort ausgeben wie hier unter der Karten: Google Reverse Geocoding

Eigenschaften von navigator

Eigenschaft Beschreibung
appCodeName Der Code-Name des Browsers. So ziemlich alle Browser nennen sich „Mozilla“
appName Der einfache Name des Browsers
appVersion Die Versionsnummer und weitere Versionsinformationen über den Browser – alle mehr oder weniger zu nichts nützlich.
cookieEnabled if (navigator.cookieEnabled) {
// Cookie-Code
}
geolocation navigator.geolocation.getCurrentPosition gibt den Standort zurück, wenn der Benutzer den Zugriff ausdrücklich erlaubt:
  • coords.latitude
  • coords.longitude
  • coords.altitude
  • coords.accuracy
  • coords.altitudeAccuracy
  • coords.heading Grad Abweichung von Nord
  • coords.speed Meter pro Sekunden
  • timestamp ein Date-Objekt
onLine Gibt zurück, ob die Seite online oder aus dem Cache des Browsers aufgerufen wird
product Engine des Browsers
platform Die Hardware-Plattform. Erscheint z.B. als Win32 or MacPPC und beinhaltet keinen Hinweis auf die Version des Betriebssystems.
userAgent Ein String mit der Versionsnummer, dem Betriebssystem und – außer bei Internet Explorer – die vorgegebene Sprache des Browsers

Verwandte Themen

Obwohl Cookies ein Eigenschaft von window.navigator sind, muss window.navigator nicht bemüht werden – der einfache Aufruf von var myCookies = document.cookie; reicht schon.

window.history

In window.history speichern die Browser die URLs, die der Benutzer besucht hat – z.B. für den Vorwärts- und Zurück-Button des Fensters.

Javascript window.history hat seine Bedeutung verloren – das history-Objekt simuliert im Grunde genommen nur die Vorwärts- und Zurück-Buttons des Browsers und wir können es unseren Besuchern durchaus zumuten, die entsprechenden Schaltflächen des Browsers zu benutzen.

Der Sicherheit zuliebe kann JavaScript die URLs der history nicht lesen und so herausfinden, welche Seiten der Besucher zuvor besucht hat. Ein Javascript kann nur die Anzahl der Seiten in der History zählen und im Blindflug zu diesen URLs verlinken.

history-Link mit Javascript

if (document.getElementById('visits')) {
    var content = document.getElementById('visits');
    
    var backRefA = document.createElement('div');
    var backRefText = document.createTextNode('Zurück');

    backRefA.appendChild(backRefText);
    visits.appendChild(backRefA);
    backRefA.onclick = function() {
        history.back();
    }
}

Javascript window.history

length Integer

Anzahl der URL-Einträge in der history-Liste

back() | forward()

machen genau das, was man erwartet: Die Anweisungen führen den Benutzer um eine Seite zurück oder vorwärts in der history und simuliert innerhalb des Dokuments die Zurück- und Vorwärts-Buttons der Browserleiste.

go()

springt Seite zurück oder vor, abhängig vom Wert des Parameters