Clipboard API
Die Clipboard API ermöglicht die Reaktion auf Zwischenablagebefehle (Ausschneiden, Kopieren und Einfügen) sowie das asynchrone Lesen und Schreiben in die Systemzwischenablage.
Hinweis:
Verwenden Sie diese API gegenüber der veralteten Methode document.execCommand()
zum Zugriff auf die Zwischenablage.
Hinweis:
Diese API ist in Web Workern nicht verfügbar (nicht über WorkerNavigator
zugänglich).
Konzepte und Nutzung
Die Systemzwischenablage ist ein Datenpuffer, der dem Betriebssystem gehört, das den Browser hostet. Sie wird für die kurzfristige Datenspeicherung und/oder den Datentransfer zwischen Dokumenten oder Anwendungen verwendet. Sie ist üblicherweise als anonymer, temporärer Datenpuffer implementiert, manchmal auch als Einfüge-Puffer bezeichnet, und kann von den meisten oder allen Programmen innerhalb der Umgebung über definierte Programmierschnittstellen zugegriffen werden.
Die Clipboard API ermöglicht es Benutzern, programmatisch Text und andere Arten von Daten in die und aus der Systemzwischenablage in sicheren Kontexten zu lesen und zu schreiben, vorausgesetzt, der Benutzer hat die im Abschnitt Sicherheitsüberlegungen aufgeführten Kriterien erfüllt.
Ereignisse werden als Ergebnis von Ausschneiden, Kopieren und Einfügen-Operationen ausgelöst, die die Zwischenablage verändern.
Die Ereignisse haben eine Standardaktion, beispielsweise kopiert die copy
-Aktion standardmäßig die aktuelle Auswahl in die Systemzwischenablage.
Die Standardaktion kann durch den Ereignishandler überschrieben werden – siehe für weitere Informationen die jeweiligen Ereignisse.
Schnittstellen
Clipboard
Sicherer Kontext-
Bietet eine Schnittstelle zum Lesen und Schreiben von Text und Daten in die oder aus der Systemzwischenablage. Die Spezifikation bezeichnet dies als die 'Async Clipboard API'.
ClipboardEvent
-
Repräsentiert Ereignisse, die Informationen im Zusammenhang mit der Änderung der Zwischenablage bereitstellen, das heißt Ausschneiden, Kopieren und Einfügen-Ereignisse. Die Spezifikation bezeichnet dies als die 'Clipboard Event API'.
ClipboardItem
Sicherer Kontext-
Repräsentiert ein einzelnes Datenformat, das zum Lesen oder Schreiben von Daten verwendet wird.
Erweiterungen zu anderen Schnittstellen
Die Clipboard API erweitert die folgenden APIs und fügt die aufgeführten Funktionen hinzu.
-
Gibt ein
Clipboard
-Objekt zurück, das Lese- und Schreibzugriff auf die Systemzwischenablage bietet. Element
copy
-Ereignis-
Ein Ereignis, das immer dann ausgelöst wird, wenn der Benutzer eine Kopieraktion initiiert.
Element
cut
-Ereignis-
Ein Ereignis, das immer dann ausgelöst wird, wenn der Benutzer eine Ausschneideaktion initiiert.
Element
paste
-Ereignis-
Ein Ereignis, das immer dann ausgelöst wird, wenn der Benutzer eine Einfügeaktion initiiert.
Sicherheitsüberlegungen
Die Clipboard API ermöglicht es Benutzern, programmatisch Text und andere Arten von Daten in die und aus der Systemzwischenablage in sicheren Kontexten zu lesen und zu schreiben.
Die Spezifikation erfordert, dass ein Benutzer kürzlich mit der Seite interagiert hat, um von der Zwischenablage zu lesen (vorübergehende Benutzeraktivierung ist erforderlich).
Wenn die Leseoperation durch Benutzerinteraktion mit einem Browser- oder Betriebssystem-"Einfügeelement" ausgelöst wird (zum Beispiel durch ein Kontextmenü), wird erwartet, dass der Browser den Benutzer um Bestätigung bittet.
Zum Schreiben in die Zwischenablage wird erwartet, dass die Seite die Permissions API clipboard-write
-Berechtigung hat, und der Browser kann auch vorübergehende Benutzeraktivierung verlangen.
Browser können zusätzliche Einschränkungen bei der Verwendung der Methoden zum Zugriff auf die Zwischenablage auferlegen.
Die Implementierungen der Browser haben sich von der Spezifikation entfernt. Die Unterschiede sind im Abschnitt Browser-Kompatibilität erfasst, und der aktuelle Stand wird unten zusammengefasst:
Chromium-Browser:
- Lesen erfordert die Permissions API
clipboard-read
-Berechtigung. Vorübergehende Aktivierung ist nicht erforderlich. - Schreiben erfordert entweder die
clipboard-write
-Berechtigung oder eine vorübergehende Aktivierung. Wenn die Berechtigung erteilt wird, bleibt sie bestehen, und weitere vorübergehende Aktivierung ist nicht erforderlich. - Die HTTP Permissions-Policy Berechtigungen
clipboard-read
undclipboard-write
müssen für<iframe>
-Elemente, die auf die Zwischenablage zugreifen, erlaubt sein. - Keine dauerhafte Einfügeaufforderung wird angezeigt, wenn eine Leseoperation durch ein Browser- oder Betriebssystem-"Einfügeelement" ausgelöst wird.
Firefox & Safari:
- Lesen und Schreiben erfordern eine vorübergehende Aktivierung.
- Die Einfügeaufforderung wird unterdrückt, wenn derselbe Ursprung Zwischenablageinhalte liest, jedoch nicht bei Inhalten fremder Herkunft.
- Die
clipboard-read
undclipboard-write
Berechtigungen werden von Firefox oder Safari nicht unterstützt (und es ist nicht geplant, sie zu unterstützen).
Firefox Web Extensions:
- Lesen von Text ist nur für Erweiterungen verfügbar, die die Web Extension
clipboardRead
-Berechtigung haben. Mit dieser Berechtigung erfordert die Erweiterung keine vorübergehende Aktivierung oder eine Einfügeaufforderung. - Schreiben von Text ist im sicheren Kontext und mit vorübergehender Aktivierung verfügbar.
Mit der Web Extension
clipboardWrite
-Berechtigung ist keine vorübergehende Aktivierung erforderlich.
Beispiele
Zugriff auf die Zwischenablage
Auf die Systemzwischenablage wird über den globalen Navigator.clipboard
zugegriffen.
Dieses Snippet ruft den Text aus der Zwischenablage ab und fügt ihn dem ersten Element hinzu, das mit der Klasse editor
gefunden wird.
Da readText()
einen leeren String zurückgibt, wenn die Zwischenablage keinen Text enthält, ist dieser Code sicher.
navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".editor").innerText += clipText),
);
Spezifikationen
Specification |
---|
Clipboard API and events # clipboard-interface |
Clipboard API and events # clipboard-event-interfaces |
Clipboard API and events # clipboarditem |
Browser-Kompatibilität
api.Clipboard
BCD tables only load in the browser
api.ClipboardEvent
BCD tables only load in the browser
api.ClipboardItem
BCD tables only load in the browser