Navigator — Schnittstelle · JavaScript-Referenz

Signatur

interface Navigator

Beschreibung

Das Interface Navigator steht für den Browser (Benutzeragenten), in dem das Skript läuft. Man erstellt keine eigene Instanz. Stattdessen greift man über die globale Eigenschaft window.navigator (bzw. navigator) auf das einzige vorhandene Objekt zu. In Web Workern gibt es mit WorkerNavigator eine eingeschränkte Variante.

Über navigator lassen sich Informationen zur Umgebung abfragen, zum Beispiel mit navigator.language, navigator.languages, navigator.onLine, navigator.hardwareConcurrency, navigator.cookieEnabled und navigator.userAgent. Vor allem ist das Objekt aber der Zugang zu vielen modernen Web-APIs:

navigator.clipboard: Zwischenablage (Clipboard)
navigator.geolocation: Standortbestimmung
navigator.mediaDevices: Kamera und Mikrofon (getUserMedia())
navigator.serviceWorker: Service Worker registrieren
navigator.permissions, navigator.storage, navigator.locks, navigator.credentials
Methoden wie navigator.share(), navigator.sendBeacon() und navigator.vibrate()

Prüfe vor der Nutzung, ob eine Funktion vorhanden ist (Feature Detection, z. B. 'share' in navigator). Den Browser anhand von userAgent zu erkennen, ist unzuverlässig. Viele Funktionen setzen außerdem einen sicheren Kontext (HTTPS) oder eine Benutzeraktion voraus.

Rückgabewert

Typ

Navigator

Beschreibung

Das globale Objekt window.navigator ist eine schreibgeschützte Referenz auf die einzige Navigator-Instanz des Fensters.

Beispiele

Umgebungsinformationen auslesen

// Kein Konstruktor: Das Objekt ist global vorhanden
const info = {
  sprache: navigator.language,
  sprachen: navigator.languages,
  online: navigator.onLine,
  kerne: navigator.hardwareConcurrency,
  cookies: navigator.cookieEnabled
};
console.log(info);

{ sprache: 'de-DE', sprachen: ['de-DE', 'de', 'en'], online: true, kerne: 8, cookies: true }

Text in die Zwischenablage kopieren (mit Feature Detection)

const copyButton = document.querySelector('#copy');

copyButton.addEventListener('click', async () => {
  if (!navigator.clipboard) {
    console.warn('Clipboard-API nicht verfügbar');
    return;
  }
  try {
    await navigator.clipboard.writeText('https://programmierung.net');
    console.log('Link kopiert!');
  } catch (err) {
    console.error('Kopieren fehlgeschlagen:', err);
  }
});

Link kopiert!

Teilen mit Fallback und Analytics per sendBeacon

const shareArticle = async () => {
  const data = { title: 'Navigator-Referenz', url: location.href };

  if (navigator.canShare?.(data)) {
    await navigator.share(data);
  } else {
    await navigator.clipboard?.writeText(data.url);
  }
};

// Beim Verlassen der Seite Statistik zuverlässig senden
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/api/stats', JSON.stringify({ page: location.pathname }));
  }
});

Online-/Offline-Status überwachen

const updateStatus = () => {
  document.body.dataset.online = navigator.onLine;
  console.log(navigator.onLine ? 'Online' : 'Offline');
};

window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);
updateStatus();

Online

// Wichtig · Fallstricke

Keine Browser-Erkennung über userAgent: Der String lässt sich fälschen. Chromium kürzt ihn inzwischen außerdem (User-Agent Reduction). Frage besser die benötigte Funktion direkt ab. navigator.userAgentData gibt es bisher nur in Chromium-Browsern.
Veraltete Eigenschaften: appName, appVersion, platform, vendor und product gibt es nur noch aus Kompatibilitätsgründen. Ihre Werte sind oft fest vorgegeben (z. B. appName === 'Netscape').
Sicherer Kontext: clipboard, geolocation, mediaDevices, serviceWorker, share() u. a. funktionieren nur über HTTPS bzw. localhost. Oft sind zusätzlich eine Benutzeraktion und eine Berechtigung nötig.
onLine ist ungenau: true heißt nur, dass eine Netzwerkverbindung besteht. Ob das Internet tatsächlich erreichbar ist, sagt der Wert nicht.
Unterschiedliche Unterstützung: share() fehlt in Firefox auf dem Desktop, vibrate() fehlt in Safari. Prüfe immer vorher, ob die Funktion vorhanden ist.
Datenschutz: Werte wie hardwareConcurrency, deviceMemory und languages tragen zum Fingerprinting bei. Manche Browser liefern deshalb absichtlich gerundete oder feste Werte.

Siehe auch

window.navigator Navigator.clipboard Navigator.geolocation Navigator.share() Navigation