Navigator.canShare() — Methode · JavaScript-Referenz

Signatur

Navigator.prototype.canShare(data)

Beschreibung

navigator.canShare() gehört zur Web Share API und dient als Vorab-Prüfung für navigator.share(). Die Methode validiert das übergebene Datenobjekt, ohne einen Teilen-Dialog zu öffnen, und gibt true zurück, wenn der Browser diese Daten teilen könnte. Sie ist vor allem beim Teilen von Dateien wichtig, denn nicht jede Plattform unterstützt jeden Dateityp (z. B. PDFs, Videos oder bestimmte Bildformate).

Typischer Einsatz: Bevor du einen „Teilen“-Button anzeigst oder einen File-Anhang anbietest, prüfst du mit canShare(), ob die Daten akzeptiert werden. Ist das Ergebnis false, kannst du einen Ersatz anbieten, etwa Kopieren in die Zwischenablage oder einen Download-Link.

false wird unter anderem zurückgegeben, wenn das Datenobjekt keine teilbaren Eigenschaften enthält (title, text, url oder files), die url ungültig ist, Dateien übergeben werden, die Dateifreigabe aber nicht unterstützt wird, oder ein Dateityp gesperrt ist. Außerdem gibt die Methode false zurück, wenn das Dokument nicht die Berechtigung web-share (Permissions Policy) besitzt.

Wichtig: canShare() garantiert nicht, dass share() erfolgreich ist. Der Nutzer kann den Dialog abbrechen, es kann eine vorübergehende Nutzeraktivierung fehlen, oder der Vorgang scheitert aus anderen Gründen zur Laufzeit. Behandle deshalb die Ablehnung des Promise von share() trotzdem.

Parameter

Name	Typ	Default	Beschreibung
$data	{ url?: string, text?: string, title?: string, files?: File[] }		Das Objekt, das später an `navigator.share()` übergeben werden soll. Mögliche Eigenschaften: `url` (zu teilende URL, relativ oder absolut), `text` (Freitext), `title` (Titel, wird von manchen Zielen ignoriert) und `files` (Array von `File`-Objekten). Wird nichts oder ein leeres Objekt übergeben, ist das Ergebnis `false`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Daten mit navigator.share() geteilt werden könnten, sonst false. Die Prüfung läuft synchron und liefert kein Promise.

Beispiele

Teilen-Button nur bei Unterstützung anzeigen

const shareData = {
  title: 'programmierung.net',
  text: 'Gute JavaScript-Referenz auf Deutsch',
  url: 'https://programmierung.net/'
};

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

// Feature-Erkennung + Datenprüfung
if (navigator.canShare?.(shareData)) {
  button.hidden = false;
  button.addEventListener('click', async () => {
    try {
      await navigator.share(shareData);
      console.log('Erfolgreich geteilt');
    } catch (err) {
      if (err.name !== 'AbortError') console.error('Fehler:', err);
    }
  });
} else {
  button.hidden = true;
  console.log('Teilen wird nicht unterstützt');
}

Erfolgreich geteilt // bzw. auf Firefox Desktop: Teilen wird nicht unterstützt

Dateien aus einem Upload-Feld teilen

const input = document.querySelector('#file-input');
const shareBtn = document.querySelector('#share-files');

shareBtn.addEventListener('click', async () => {
  const files = [...input.files];
  const data = { files, title: 'Meine Fotos' };

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

  try {
    await navigator.share(data);
    console.log(`${files.length} Datei(en) geteilt`);
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
  }
});

2 Datei(en) geteilt

Fallback auf Zwischenablage

const shareOrCopy = async (url) => {
  const data = { url };
  if (navigator.canShare?.(data)) {
    await navigator.share(data);
    return 'geteilt';
  }
  await navigator.clipboard.writeText(url);
  return 'in Zwischenablage kopiert';
};

document.querySelector('#link-btn').addEventListener('click', async () => {
  const result = await shareOrCopy(location.href);
  console.log(`Link ${result}`);
});

Link in Zwischenablage kopiert

Verschiedene Datenobjekte prüfen

console.log(navigator.canShare({}));
console.log(navigator.canShare({ text: 'Hallo' }));
console.log(navigator.canShare({ url: 'http://[ungültig' }));

const pdf = new File(['%PDF-1.4'], 'bericht.pdf', { type: 'application/pdf' });
console.log(navigator.canShare({ files: [pdf] }));

false true false true // oder false, je nach Plattform

// Wichtig · Fallstricke

Feature-Erkennung: In Browsern ohne Web Share API (z. B. Firefox Desktop) ist navigator.canShare undefined. Rufe die Methode daher mit optionaler Verkettung (navigator.canShare?.(data)) oder nach einer typeof-Prüfung auf.
Sicherer Kontext: Die Methode steht nur über HTTPS (oder localhost) zur Verfügung.
Permissions Policy: In einem <iframe> braucht es allow="web-share", sonst liefert canShare() false.
Kein Freifahrtschein: true heißt nur, dass die Daten gültig sind. share() kann trotzdem mit AbortError (Nutzer bricht ab), NotAllowedError (keine Nutzeraktivierung) oder DataError abgelehnt werden.
Dateitypen: Welche MIME-Typen erlaubt sind, hängt von Browser und Betriebssystem ab. Prüfe immer mit den konkreten File-Objekten und nicht nur mit Text.
Uneinheitliche Unterstützung: Chrome auf Windows/ChromeOS unterstützt das Teilen, Chrome unter Linux nicht; unter macOS erst ab neueren Versionen. Plane immer einen Ersatzweg ein.

Siehe auch

Navigator.share() Navigator Clipboard.writeText() File Navigator.clipboard CanvasPattern.setTransform() Navigator.javaEnabled()