Web Share API

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die Web Share API bietet einen Mechanismus zum Teilen von Text, Links, Dateien und anderen Inhalten mit einem vom Benutzer ausgewählten Share Target.

Hinweis: Diese API ist nicht verfügbar in Web Workers (nicht zugänglich über WorkerNavigator).

Hinweis: Diese API sollte nicht mit der Web Share Target API verwechselt werden, die es einer Website ermöglicht, sich selbst als Share Target anzugeben.

Konzepte und Verwendung

Die Web Share API ermöglicht es einer Website, Text, Links, Dateien und andere Inhalte an benutzerausgewählte Share Targets zu teilen, indem die Sharing-Mechanismen des zugrunde liegenden Betriebssystems genutzt werden. Diese Share Targets umfassen typischerweise die System-Zwischenablage, E-Mail, Kontakte oder Messaging-Anwendungen sowie Bluetooth- oder Wi-Fi-Kanäle.

Die API verfügt über nur zwei Methoden. Die navigator.canShare()-Methode kann verwendet werden, um zunächst zu validieren, ob einige Daten "teilbar" sind, bevor sie an navigator.share() zum Versenden übergeben werden.

Die navigator.share()-Methode ruft den nativen Sharing-Mechanismus des zugrunde liegenden Betriebssystems auf und übergibt die angegebenen Daten. Sie erfordert transiente Aktivierung und muss daher durch ein UI-Ereignis wie einen Button-Klick ausgelöst werden. Darüber hinaus muss die Methode gültige Daten angeben, die vom nativen Implementation unterstützt werden.

Die Web Share API wird durch die web-share Permissions Policy geregelt. Wenn die Richtlinie unterstützt, aber nicht gewährt wird, werden beide Methoden anzeigen, dass die Daten nicht teilbar sind.

Schnittstellen

Erweiterungen zu anderen Schnittstellen

Gibt einen booleschen Wert zurück, der angibt, ob die angegebenen Daten teilbar sind.

Gibt ein Promise zurück, das aufgelöst wird, wenn die übergebenen Daten erfolgreich an ein Share Target gesendet wurden. Diese Methode muss durch einen Button-Klick oder eine andere Benutzeraktivierung aufgerufen werden (erfordert transiente Aktivierung).

Beispiel

Der folgende Code zeigt, wie man mit navigator.share() einen Link teilen kann, ausgelöst durch einen Button-Klick.

js
const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

Das obige Beispiel stammt aus unserem Web-Share-Test (siehe den Quellcode). Sie können dies auch als Live-Beispiel in navigator.share() sehen.

Spezifikationen

Specification
Web Share API

Browser-Kompatibilität

api.Navigator.share

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
share
data.files parameter
data.text parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

api.Navigator.canShare

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
canShare
data.files parameter
data.text parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Siehe auch