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 eine Möglichkeit, Text, Links, Dateien und andere Inhalte an ein beliebiges, vom Benutzer ausgewähltes Share-Ziel zu teilen.

Hinweis: Diese API ist nicht verfügbar in Web Workers (nicht verfügbar ü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-Ziel zu definieren.

Konzepte und Verwendung

Die Web Share API ermöglicht es einer Website, Text, Links, Dateien und andere Inhalte an vom Benutzer ausgewählte Share-Ziele zu senden, wobei die Teilmechanismen des zugrunde liegenden Betriebssystems genutzt werden. Zu diesen Share-Zielen gehören typischerweise die Zwischenablage des Systems, E-Mail, Kontakte oder Messaging-Anwendungen sowie Bluetooth- oder Wi-Fi-Kanäle.

Die API bietet nur zwei Methoden. Die Methode navigator.canShare() kann verwendet werden, um zunächst zu prüfen, ob einige Daten "teilbar" sind, bevor sie an navigator.share() zum Senden übergeben werden.

Die Methode navigator.share() ruft den nativen Teilmechanismus des zugrunde liegenden Betriebssystems auf und übergibt die angegebenen Daten. Sie erfordert eine transiente Aktivierung und muss daher durch ein UI-Event wie einen Button-Klick ausgelöst werden. Darüber hinaus muss die Methode gültige Daten angeben, die für das Teilen durch die native Implementierung unterstützt werden.

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

Schnittstellen

Erweiterungen zu anderen Schnittstellen

navigator.canShare(): Gibt einen Boolean-Wert zurück, der angibt, ob die angegebenen Daten teilbar sind.
navigator.share(): Gibt ein Promise zurück, das aufgelöst wird, wenn die übergebenen Daten erfolgreich an ein Share-Ziel gesendet wurden. Diese Methode muss durch einen Button-Klick oder eine andere Benutzeraktivierung aufgerufen werden (erfordert transiente Aktivierung).

Beispiel

Der untenstehende Code zeigt, wie Sie einen Link mithilfe von navigator.share() teilen können, der durch einen Button-Klick ausgelöst wird.

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 (sehen Sie sich den Quellcode an). Sie können dies auch als Live-Beispiel in navigator.share() sehen.

Spezifikationen

Specification
Web Share API

Web Share Target API