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.
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 GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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.