Window Navigator

Window Navigator – Informationen über den Browser

window.navigator liefert Informationen zum System und Browser des Benutzers. Dazu gehören Geolocation, cookieEnabled (Cookies aktiviert?), das Clipboard zum Kopieren von Texten, ob die Seite online besucht wird oder im Cache liegt, die eingestellte Sprache mit language und Informationen zum Browser selbst.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Browser-Name, -Version und User Agent String

Der User Agent String, der auf dem ersten Blick aussieht, als wäre er eine Hilfe beim Erkennen des Browsers, enthält keine zuverlässigen Informationen. Verschiedene Browser können nahezu identische Namen anzeigen, einige Browser identifizieren sich nicht, um Tests zu entgehen oder die Statistik aufzumischen. Die Version des Betriebssystems hinkt häufig hinterher.

Die Browser kürzen den User Agent String, der Auskunft über Betriebssystem und Browserversion gibt, um den Fingerprint zugunsten des Datenschutz zu reduzieren.

Wer mit Javascript den Browser des Nutzers ermitteln will, darf sich auf die Informationen aus dem Navigator-Objekt nicht verlassen. Aber meistens wollen wir auch gar nicht wissen, welcher Browser anliegt, sondern ob der aktuelle Browser bestimmte Eigenschaften unterstützt: Feature Detection.

window.navigator

window.navigator kann mit oder ohne den Präfix window geschrieben werden.

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

Wenn doch einmal alle Browser so harmonisch 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.

Wie zuverlässig ist navigator.platform? Mein iPad zeigt unter navigator.platform tatsächlich iPad an, das iPhone aber MacIntel und selbst auf einem Apple M1 zeigt Chrome MacIntel. Chrome und auch der Samsung-Browser auf dem Android-Handy zeigen Linux armv8l.

Server Log Files

Der Webserver sichert die Zugriffe auf die Webseite in den Logdateien und stimmt relativ weitgehend mit dem userAgent von window.navigator überein.

User Agent String (useragentstring.com/index.php)

Feature Detection

Auf der Basis von eigenen Tests kann Javascript Browsern mit speziellen Eigenschaften Extras anbieten. So werden ältere Browser nicht durch Fehler blockiert oder die Eigenschaften können durch ein Polyfill nachgerüstet werden.

Immer noch ist Feature-Detection mit Modernizr die zuverlässige Quelle No 1, aber wir können auch selber anklopfen:

if ("geolocation" in navigator) {
	navigator.geolocation.getCurrentPosition(function(position) {
	…	…	…
	});
} else {
	…	…	…
}

Hilfreich ist auch die Abfrage der vom Browser unterstützten Eigenschaften / Methoden z.B. die CSS @supports-Regel. Die CSS supports-Regel ist nicht auf die Anwendung im CSS beschränkt, sondern Javascript hat ein elegantes Äquivalent

if (CSS.supports("display", "flex")) { 
 …
}


			

CSS.supports wird von allen modernen Browsern unterstützt, aber nicht von IE bis einschließlich IE11.

navigator.clipboard.writeText

kopiert Text in die Zwischenablage des Benutzers.

Eleganter prüfen, ob der Browser navigator.clipboard.writeText (nicht IE11) beherrscht, um den Text in die Zwischenablage zu kopieren und einen Ersatz anbieten:

document.querySelector(".copythis").addEventListener ("click", function () {
	navigator.clipboard.writeText("Text im Clipboard gelandet").then(function() {
		//console.log ("In die Zwischenablage kopiert")
	}, function() {
		//console.log ("nix da")
	});
});

navigator.platform / Gerät zuverlässig erkennen?

Lassen sich mobile Geräte zuverlässig entdecken? navigator.platform reicht nicht aus. Die folgende Funktion fragt zusätzlich nach Touch-Support.

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform) || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

if (iOS()) {
	console.log ("IOS iPad oder iPhone")
} else {
	console.log ("Nichts davon")
}

Eine Eigenschaft von navigator.platform ist standalone. Das trifft nur zu, wenn Seiten als Progressive Web App installiert sind und im Fullscreen-Modus laufen. Nichts desto Trotz – ein nicht wirklich zuverlässiges Verfahren und entdeckt iPhone und iPad erst ab iOS 13.

Eigenschaften / Methoden von von window.navigator

clipboard

Zwischenablage, s.o.

appCodeName

Der Code-Name des Browsers. So ziemlich alle Browser nennen sich „Mozilla“

appName

Der einfache Name des Browsers – liefert Netscape für IE11, Chrome, Safari, Firefox

appVersion

Die Versionsnummer und weitere Versionsinformationen über den Browser – alle mehr oder weniger zu nichts nützlich.

battery

Batterie-Status (Ladezustand) des Geräts

cookieEnabled

gibt zurück, ob Cookies im Browser aktiviert oder ausgeschaltet sind.

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

language

Sprache des Browsers

mimeTypes

gibt ein Array mit den Dateitypen zurück, die vom Browser unterstützt werden.

onLine

Gibt zurück, ob die Seite online oder aus dem Cache des Browsers aufgerufen wird – wichtige Frage in Anwendungen, die mit dem Manifest arbeiten.

platform

Die Hardware-Plattform. Erscheint z.B. als Win32 or MacPPC und beinhaltet keinen Hinweis auf die Version des Betriebssystems.

plugins

Sammlung der im Browser installierten Plugins

product

Produktname der Browser-Engine

storage

Gibt ein StorageManager-Objekt zurück – gedacht für die Verwaltung des verfügbaren Speichers.

userAgent

Ein String mit der Versionsnummer, dem Betriebssystem und – außer bei Internet Explorer – die vorgegebene Sprache des Browsers

javaEnabled()

Java (nicht Javascript!) im Browser aktiviert?