CSS, HTML und Javascript mit {stil}

window.navigator: Geolocation

Javascript Geolocation

Die Geolocation ist die Basis für die Positionsbestimmung in mobilen Apps und unterliegt besonderen Vorkehrungen zur Wahrung der Privatsphäre: Bevor der Browser die Daten herausgibt, wird der Benutzer um Erlaubnis gefragt.

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.

Ab Chrome 50 wird die Schnittstelle zur Geolocation nur noch auf HTTPS-Seiten funktionieren. Auf unverschlüsselten Seiten (HTTP) wird Geolocation keine Daten liefern.

    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.geolocation

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

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