Clipboard API
Die Clipboard-API ermöglicht es, auf Zwischenablagebefehle (ausschneiden, kopieren und einfügen) zu reagieren sowie asynchron von und in die systemweite Zwischenablage zu lesen und zu schreiben.
Hinweis:
Nutzen Sie diese API anstelle der veralteten Methode document.execCommand()
, um auf die Zwischenablage zuzugreifen.
Hinweis:
Diese API ist nicht verfügbar in Web Workers (nicht über WorkerNavigator
zugänglich).
Konzepte und Nutzung
Die System-Zwischenablage ist ein Datenpuffer, der dem Betriebssystem gehört, auf dem der Browser läuft, und wird für die kurzfristige Datenspeicherung und/oder den Datentransfer zwischen Dokumenten oder Anwendungen verwendet. Sie wird normalerweise als anonymer, temporärer Datenpuffer implementiert, der manchmal als Einfügepuffer bezeichnet wird und von den meisten oder allen Programmen innerhalb der Umgebung über definierte Programmierschnittstellen zugänglich ist.
Die Clipboard-API erlaubt es Benutzern, programmatisch Text und andere Arten von Daten in die System-Zwischenablage zu lesen und zu schreiben, sofern der Benutzer die im Abschnitt Sicherheitsüberlegungen genannten Kriterien erfüllt hat.
Ereignisse werden als Ergebnis von cut
, copy
und paste
-Operationen ausgelöst, die die Zwischenablage verändern. Die Ereignisse haben eine Standardaktion, zum Beispiel kopiert die copy
-Aktion standardmäßig die aktuelle Auswahl in die System-Zwischenablage. Die Standardaktion kann durch den Ereignishandler überschrieben werden — siehe jedes der Ereignisse für weitere Informationen.
Schnittstellen
Clipboard
Sicherer Kontext-
Bietet eine Schnittstelle zum Lesen und Schreiben von Text und Daten in die oder aus der System-Zwischenablage. Die Spezifikation bezeichnet dies als 'Async Clipboard API'.
ClipboardEvent
-
Repräsentiert Ereignisse, die Informationen im Zusammenhang mit der Änderung der Zwischenablage bereitstellen, das heißt
cut
,copy
undpaste
Ereignisse. Die Spezifikation bezeichnet dies als 'Clipboard Event API'. ClipboardItem
Sicherer Kontext-
Repräsentiert ein einzelnes Artikel-Format, das beim Lesen oder Schreiben von Daten verwendet wird.
Erweiterungen zu anderen Schnittstellen
Die Clipboard-API erweitert die folgenden APIs und fügt die aufgelisteten Funktionen hinzu.
-
Gibt ein
Clipboard
-Objekt zurück, das Lese- und Schreibzugriff auf die System-Zwischenablage bietet. Element
copy
Ereignis-
Ein Ereignis, das jedes Mal ausgelöst wird, wenn der Benutzer eine Kopieraktion initiiert.
Element
cut
Ereignis-
Ein Ereignis, das jedes Mal ausgelöst wird, wenn der Benutzer eine Ausschneideaktion initiiert.
Element
paste
Ereignis-
Ein Ereignis, das jedes Mal 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 oder aus der System-Zwischenablage zu lesen und zu schreiben, in sicheren Kontexten.
Die Spezifikation verlangt, dass ein Benutzer kürzlich mit der Seite interagiert hat, um aus der Zwischenablage zu lesen (transiente Benutzeraktivierung ist erforderlich). Wenn die Leseoperation durch Benutzerinteraktion mit einem Browser- oder OS-"Einfügetagn" (wie einem Kontextmenü) verursacht wird, erwartet der Browser, dass er den Benutzer um Bestätigung fragt. Zum Schreiben in die Zwischenablage erwartet die Spezifikation, dass der Seite die Berechtigungs-API clipboard-write
erteilt wurde und der Browser möglicherweise auch transiente Benutzeraktivierung erfordert. Browser können zusätzliche Einschränkungen für die Verwendung der Methoden zum Zugriff auf die Zwischenablage festlegen.
Browser-Implementierungen haben sich von der Spezifikation entfernt. Die Unterschiede sind im Abschnitt Browser-Kompatibilität erfasst und der aktuelle Stand wird nachfolgend zusammengefasst:
Chromium-Browser:
- Für das Lesen ist die Berechtigung
clipboard-read
der Berechtigungs-API erforderlich. Transiente Aktivierung ist nicht erforderlich. - Schreiben erfordert entweder die Berechtigung
clipboard-read
oder transiente Aktivierung. Wenn die Berechtigung erteilt wird, bleibt sie bestehen und weitere transiente Aktivierung ist nicht erforderlich. - Die HTTP-Berechtigungen
clipboard-read
undclipboard-write
der Berechtigungsrichtlinie müssen für<iframe>
Elemente erlaubt sein, die auf die Zwischenablage zugreifen. - Kein dauerhaftes Einfüge-Aufforderungsfenster wird angezeigt, wenn eine Leseoperation durch ein Browser- oder OS-"Einfügetagn" verursacht wird.
Firefox & Safari:
- Lesen und Schreiben erfordern transiente Aktivierung.
- Die Einfüge-Aufforderung wird unterdrückt, wenn Inhalte der selben Herkunft aus der Zwischenablage gelesen werden, aber nicht bei Inhalten aus anderer Herkunft.
- Die Berechtigungen
clipboard-read
undclipboard-write
werden von Firefox oder Safari nicht unterstützt (und es ist nicht geplant, diese zu unterstützen).
Firefox Weberweiterungen:
- Lesen von Text ist nur für Erweiterungen verfügbar, die die Web-Erweiterungsberechtigung
clipboardRead
besitzen. Mit dieser Berechtigung benötigt die Erweiterung keine transiente Aktivierung oder eine Einfüge-Aufforderung. - Schreiben von Text ist in einem sicheren Kontext und mit transiente Aktivierung möglich. Mit der Web-Erweiterungsberechtigung
clipboardWrite
ist keine transiente Aktivierung erforderlich.
Beispiele
Zugriff auf die Zwischenablage
Auf die systemweite Zwischenablage wird über die globale Navigator.clipboard
zugegriffen.
Dieses Snippet holt den Text aus der Zwischenablage und fügt ihn dem ersten Element hinzu, das mit der Klasse editor
gefunden wird. Da readText()
(und auch read()
, falls vorhanden) 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