Window.navigator — Eigenschaft · JavaScript-Referenz

Signatur

get Window.navigator

Beschreibung

Über window.navigator (kurz: navigator) kommt man an das Navigator-Objekt. Das ist der zentrale Einstieg zu Informationen über den Browser und zu vielen modernen Web-APIs. Dazu gehören Eigenschaften wie language, languages, onLine, hardwareConcurrency und cookieEnabled. Außerdem gibt es Unterobjekte bzw. Methoden wie clipboard, geolocation, serviceWorker, mediaDevices, permissions, storage, share() und sendBeacon().

Typische Einsatzfälle:

Prüfen, ob eine Funktion vorhanden ist (Feature Detection), z. B. 'serviceWorker' in navigator
Die bevorzugte Sprache des Nutzers ermitteln, um Texte passend anzuzeigen
Den Netzwerkstatus abfragen
Browser-Funktionen wie die Zwischenablage oder das native Teilen-Menü nutzen

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein anderes Objekt zuweisen. In Web Workern gibt es statt dessen self.navigator. Dort steckt ein WorkerNavigator mit weniger Funktionen. Seit Node.js 21 gibt es auch ein globales navigator mit einigen wenigen Eigenschaften wie hardwareConcurrency, language und userAgent.

Rückgabewert

Typ

Navigator

Beschreibung

Das Navigator-Objekt des aktuellen Browsing-Kontexts. Es ist immer dasselbe Objekt, d. h. window.navigator === navigator.

Beispiele

Bevorzugte Sprache des Nutzers ermitteln

const unterstuetzt = ['de', 'en', 'fr'];

// navigator.languages ist nach Priorität sortiert
const sprache = (navigator.languages ?? [navigator.language])
  .map((tag) => tag.split('-')[0])
  .find((code) => unterstuetzt.includes(code)) ?? 'en';

document.documentElement.lang = sprache;
console.log(`UI-Sprache: ${sprache}`);

UI-Sprache: de

Feature Detection: Service Worker registrieren

if ('serviceWorker' in navigator) {
  try {
    const reg = await navigator.serviceWorker.register('/sw.js');
    console.log('Service Worker aktiv, Scope:', reg.scope);
  } catch (err) {
    console.error('Registrierung fehlgeschlagen:', err);
  }
} else {
  console.log('Service Worker werden nicht unterstützt.');
}

Service Worker aktiv, Scope: https://example.com/

Online-Status und Kopieren in die Zwischenablage

const status = () => console.log(navigator.onLine ? 'Online' : 'Offline');
status();
window.addEventListener('online', status);
window.addEventListener('offline', status);

const kopieren = async (text) => {
  // Nur in sicheren Kontexten (HTTPS) und nach Nutzerinteraktion
  if (!navigator.clipboard) return false;
  await navigator.clipboard.writeText(text);
  return true;
};

document.querySelector('#copy')?.addEventListener('click', async () => {
  console.log('Kopiert:', await kopieren('Hallo Welt'));
});

Online Kopiert: true

Daten beim Verlassen der Seite zuverlässig senden

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    const daten = JSON.stringify({ event: 'seite_verlassen', zeit: Date.now() });
    // sendBeacon wird auch dann noch zugestellt, wenn die Seite geschlossen wird
    navigator.sendBeacon('/analytics', daten);
  }
});

// Wichtig · Fallstricke

Kein Browser-Sniffing mit userAgent: Die Zeichenkette in navigator.userAgent lässt sich fälschen, ist unzuverlässig und wird von den Browsern zunehmend gekürzt (User-Agent Reduction). Besser prüft man direkt, ob eine Funktion vorhanden ist ('share' in navigator). Wo verfügbar (Chromium), liefert navigator.userAgentData strukturierte Daten.
onLine ist ungenau: true heißt nur, dass eine Netzwerkverbindung besteht, nicht dass das Internet wirklich erreichbar ist.
Sichere Kontexte: Viele Unterobjekte wie clipboard, serviceWorker, mediaDevices, geolocation und share() gibt es nur über HTTPS bzw. localhost. Oft brauchen sie außerdem eine Nutzerinteraktion oder eine Berechtigung.
Datenschutz: Viele Eigenschaften (z. B. hardwareConcurrency, deviceMemory, languages) eignen sich zum Fingerprinting, also zum Wiedererkennen von Nutzern. Browser mit Tracking-Schutz können deshalb vereinfachte Werte liefern.
Veraltete Eigenschaften: appName, appVersion, platform, product und vendor gibt es nur noch aus Kompatibilitätsgründen. Man sollte sich nicht auf sie verlassen.
Kompatibilität: window.navigator selbst wird von allen Browsern unterstützt. Die einzelnen Unter-APIs werden aber sehr unterschiedlich unterstützt. Auf Node.js ist navigator erst ab Version 21 global verfügbar.

Siehe auch

Navigator Navigator.language Navigator.onLine Navigator.clipboard Window