Navigator.share() — Methode · JavaScript-Referenz

Signatur

Navigator.prototype.share(data)

Beschreibung

navigator.share() gehört zur Web Share API und öffnet den Teilen-Dialog des Betriebssystems, zum Beispiel das Share-Sheet unter iOS/Android oder den Teilen-Dialog unter Windows. Die Nutzerin oder der Nutzer wählt dort das Ziel aus, etwa einen Messenger, eine E-Mail-App, AirDrop oder die Zwischenablage. So kann eine Webanwendung Inhalte teilen, ohne für jeden Dienst eigene Buttons oder Skripte von Drittanbietern einzubinden.

Die Methode gibt ein Promise zurück. Es wird erfüllt, sobald der Teilvorgang erfolgreich abgeschlossen ist. Es wird abgelehnt, wenn der Dialog abgebrochen wird, die Daten ungültig sind oder der Aufruf nicht erlaubt ist. Wichtig: Das Promise sagt nicht, welches Ziel gewählt wurde. Diese Information bleibt aus Datenschutzgründen verborgen.

Für den Aufruf gelten mehrere Bedingungen:

Die Seite muss in einem sicheren Kontext (HTTPS) laufen.
Es braucht eine vorübergehende Nutzeraktivierung. Man ruft die Methode also direkt in einem click- oder vergleichbaren Handler auf.
In iframes muss die Berechtigungsrichtlinie web-share erlaubt sein.

Weil die Unterstützung von Browser und Plattform abhängt, sollte man vorher mit 'share' in navigator prüfen, ob die Methode vorhanden ist. Vor dem Teilen von Dateien prüft man zusätzlich mit navigator.canShare(), ob genau diese Dateien teilbar sind. Fehlt die Unterstützung, ist ein Rückfall auf die Zwischenablage oder klassische Teilen-Links üblich.

Parameter

Name	Typ	Default	Beschreibung
$data	ShareData (Object)	{}	Objekt mit den zu teilenden Daten. Mindestens eine bekannte Eigenschaft muss gesetzt sein, sonst wird das Promise mit `TypeError` abgelehnt. Mögliche Eigenschaften: `url` (`string`): Die zu teilende URL. Relative URLs werden gegen die Dokument-URL aufgelöst. `text` (`string`): Freitext, z. B. eine Nachricht. `title` (`string`): Titel. Manche Ziele ignorieren ihn, z. B. Messenger. `files` (`File[]`): Array von `File`-Objekten. Unterstützt werden je nach Plattform nur bestimmte Typen, etwa Bilder, Audio, Video, PDF und Text.

Rückgabewert

Typ

Promise<undefined>

Beschreibung

Wird mit undefined erfüllt, wenn das Teilen erfolgreich war. Wird mit einer DOMException oder einem TypeError abgelehnt:

AbortError: Dialog abgebrochen oder kein Ziel verfügbar.
NotAllowedError: keine Nutzeraktivierung, web-share-Richtlinie blockiert oder Dateien aus Sicherheitsgründen abgelehnt.
InvalidStateError: Dokument nicht aktiv oder bereits ein Teilvorgang offen.
DataError: Problem beim Übergeben der Daten an das Ziel.
TypeError: ungültige oder leere Daten, nicht teilbare URL oder nicht unterstützte Dateien.

Beispiele

Aktuelle Seite per Button teilen (mit Rückfall auf die Zwischenablage)

const button = document.querySelector('#share-button');

button.addEventListener('click', async () => {
  const shareData = {
    title: document.title,
    text: 'Schau dir diesen Artikel an:',
    url: location.href,
  };

  if (!('share' in navigator)) {
    // Rückfall: Link in die Zwischenablage kopieren
    await navigator.clipboard.writeText(shareData.url);
    console.log('Link kopiert.');
    return;
  }

  try {
    await navigator.share(shareData);
    console.log('Erfolgreich geteilt.');
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Teilen abgebrochen.');
    } else {
      console.error('Teilen fehlgeschlagen:', err);
    }
  }
});

Erfolgreich geteilt. // oder: Teilen abgebrochen. // oder (ohne Unterstützung): Link kopiert.

Erzeugtes Bild aus einem Canvas teilen

const canvas = document.querySelector('canvas');
const shareImageButton = document.querySelector('#share-image');

const canvasToFile = (canvas, name) =>
  new Promise((resolve) => {
    canvas.toBlob((blob) => {
      resolve(new File([blob], name, { type: 'image/png' }));
    }, 'image/png');
  });

// Die Datei vorab erzeugen, damit die Nutzeraktivierung beim Klick nicht verfällt
let imageFile;
canvasToFile(canvas, 'zeichnung.png').then((file) => {
  imageFile = file;
});

shareImageButton.addEventListener('click', async () => {
  const data = { files: [imageFile], title: 'Meine Zeichnung' };

  if (!navigator.canShare?.(data)) {
    console.warn('Dateien können hier nicht geteilt werden.');
    return;
  }

  try {
    await navigator.share(data);
    console.log('Bild geteilt.');
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
  }
});

Bild geteilt.

Wiederverwendbare Hilfsfunktion mit Feature-Erkennung

const shareOrFallback = async ({ title, text, url }) => {
  const data = { title, text, url };

  if (navigator.canShare?.(data)) {
    try {
      await navigator.share(data);
      return 'shared';
    } catch (err) {
      if (err.name === 'AbortError') return 'aborted';
      // Andere Fehler: auf die Zwischenablage ausweichen
    }
  }

  await navigator.clipboard.writeText(url);
  return 'copied';
};

document.querySelectorAll('[data-share-url]').forEach((el) => {
  el.addEventListener('click', async () => {
    const result = await shareOrFallback({
      title: el.dataset.shareTitle,
      text: el.dataset.shareText,
      url: el.dataset.shareUrl,
    });
    console.log(result);
  });
});

shared // bzw. "aborted" oder "copied"

// Wichtig · Fallstricke

Nutzeraktivierung verfällt: Nach einem Klick bleibt nur ein kurzes Zeitfenster. Aufwendige await-Aufrufe vor share() können es überschreiten, zum Beispiel ein fetch() für eine Datei. Dann folgt NotAllowedError. Daten deshalb möglichst vorher laden.
Nur HTTPS: In unsicheren Kontexten existiert navigator.share gar nicht. localhost gilt als sicher.
iframes: Eingebettete Dokumente brauchen <iframe allow="web-share">. Sonst wird der Aufruf abgelehnt.
Nur ein Dialog zugleich: Ein zweiter Aufruf, während der Dialog noch offen ist, führt zu InvalidStateError.
Browser-Kompatibilität: Gute Unterstützung auf Mobilgeräten (Safari iOS, Chrome Android). Auf dem Desktop unterstützen Safari unter macOS sowie Chrome und Edge unter Windows und ChromeOS die Methode. Chrome unter Linux und Firefox Desktop unterstützen sie standardmäßig nicht. Datei-Teilen wird noch lückenhafter unterstützt. Deshalb immer Feature-Erkennung und einen Rückfall einplanen.
Dateitypen: Browser erlauben nur eine Auswahl sicherer MIME-Typen, etwa Bilder, Audio, Video, PDF und Text. Ausführbare Dateien und viele andere Typen werden abgelehnt. Vorher mit navigator.canShare({ files }) prüfen.
Datenschutz: Das gewählte Ziel wird nicht mitgeteilt. Analysen können nur erfassen, ob der Vorgang abgeschlossen oder abgebrochen wurde.
Inhalte: Manche Ziele ignorieren title oder text. Wichtige Informationen gehören deshalb in url oder text, nicht nur in title.

Siehe auch

Navigator.canShare() Navigator.vibrate() Navigator.getBattery() Navigator.sendBeacon() Navigator.setAppBadge() HighlightRegistry.entries() new ImageCapture()