ClipboardItem
Baseline 2024
Newly available
Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Die ClipboardItem
-Schnittstelle der Clipboard API repräsentiert ein einzelnes Datenformat, das beim Lesen oder Schreiben von Zwischenablagedaten mit clipboard.read()
und clipboard.write()
verwendet wird.
Der Vorteil der ClipboardItem
-Schnittstelle zur Darstellung von Daten besteht darin, dass Entwickler mit der unterschiedlichen Bandbreite von Dateitypen und Daten umgehen können.
Hinweis: Um mit Text zu arbeiten, siehe die Methoden Clipboard.readText()
und Clipboard.writeText()
der Clipboard
-Schnittstelle.
Konstruktor
ClipboardItem()
-
Erstellt ein neues
ClipboardItem
-Objekt, mit dem MIME-Typ als Schlüssel undBlob
als Wert.
Instanz-Eigenschaften
Diese Schnittstelle bietet die folgenden Eigenschaften.
types
Nur lesbar-
Gibt ein
Array
von MIME-Typen zurück, die imClipboardItem
verfügbar sind. presentationStyle
Nur lesbar-
Gibt einen der folgenden Werte zurück:
"unspecified"
,"inline"
oder"attachment"
.
Statische Methoden
Diese Schnittstelle definiert die folgenden Methoden.
ClipboardItem.supports()
-
Prüft, ob ein gegebener MIME-Typ von der Zwischenablage unterstützt wird. Dies ermöglicht es einer Website zu erkennen, ob ein MIME-Typ von der Zwischenablage unterstützt wird, bevor versucht wird, Daten zu schreiben.
Instanz-Methoden
Beispiele
Schreiben in die Zwischenablage
Hier verwenden wir supports()
, um zu überprüfen, ob der MIME-Datentyp image/svg+xml
unterstützt wird. Wenn ja, laden wir das Bild mit der "Fetch API" herunter und lesen es in ein Blob
ein, mit dem wir ein ClipboardItem
erstellen können, das in die Zwischenablage geschrieben wird.
async function writeClipImg() {
try {
if (ClipboardItem.supports("image/svg+xml")) {
const imgURL = "/my-image.svg";
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
console.log("Fetched image copied.");
} else {
console.log("SVG images are not supported by the clipboard.");
}
} catch (err) {
console.error(err.name, err.message);
}
}
Lesen aus der Zwischenablage
Hier geben wir alle Elemente auf der Zwischenablage über die Methode clipboard.read()
zurück. Dann verwenden wir die Eigenschaft ClipboardItem.types
, um das Argument für getType()
festzulegen und das entsprechende Blob-Objekt zurückzugeben.
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
// we can now use blob here
}
}
} catch (err) {
console.error(err.name, err.message);
}
}
Spezifikationen
Specification |
---|
Clipboard API and events # clipboarditem |
Browser-Kompatibilität
BCD tables only load in the browser