Veröffentlicht: 30. April 2025
Feiern: Diese Webfunktion ist jetzt in allen drei großen Browser-Engines verfügbar und wird ab dem 30. März 2025 als Baseline Newly (Neu verfügbar) eingestuft.
Die Async Clipboard API hat die Arbeit mit der Zwischenablage erheblich vereinfacht. Anstelle der bisherigen Methoden zum Verwalten der Zwischenablage können Sie jetzt navigator.clipboard.writeText() für Nur-Textinhalte oder navigator.clipboard.write() für „fast“ alle anderen Inhalte wie Bilder, Textinhalte oder HTML aufrufen.
Bisher fehlte jedoch eine Quantifizierung des „fast“. Sie können beispielsweise nicht wissen, ob die API SVG unterstützt, bis Sie es versucht haben. Falls die API SVG nicht unterstützt, können Sie die geworfene Ausnahme abfangen. Das war nicht sehr ergonomisch, weshalb die statische Funktion ClipboardItem.supports() festgelegt wurde.
Die Funktion hat jetzt den Status „Baseline Newly available“ erreicht, was bedeutet, dass die Arbeit mit der Zwischenablage noch besser wird. Wenn Sie wissen möchten, ob ein Browser ein bestimmtes Format unterstützt, übergeben Sie der Funktion den MIME-Typ des gewünschten Formats.
const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."
Bisher habe ich „fast“ alles andere geschrieben. Jetzt wird es wirklich interessant. Mit benutzerdefinierten Webformaten können Sie mit Formaten arbeiten, die vom Browser nicht nativ unterstützt werden. Beispielsweise werden AVIF-Bilder standardmäßig nicht vom Browser unterstützt.
const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."
Mit benutzerdefinierten Webformaten können Sie jedoch mit AVIF-Bildern arbeiten und sie frei kopieren und einfügen, sofern die Empfängerseite auch mit dem benutzerdefinierten Webformat umgehen kann.
const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."
Mit der Funktion ClipboardItem.supports() können Sie jetzt auch die Situation der Zwischenablageunterstützung für das benutzerdefinierte Webformat richtig erkennen und sicher sein, dass es funktioniert.
if (ClipboardItem.supports('web image/avif')) {
// Fetch remote AVIF image and obtain its blob representation.
const blob = await fetch('image.avif').then((response) => response.blob());
try {
// Write the image data to the clipboard, prepending the blob's actual
// type (`"image/avif"` with the string `"web "`, so it becomes
// `"web image/avif"`.
const clipboardItem = new ClipboardItem({
'web image/avif': blob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
}
Mit der Funktion ClipboardItem.supports(), die jetzt als Baseline Newly verfügbar ist, können Webentwickler die Zwischenablageunterstützung für verschiedene MIME-Typen zuverlässig erkennen, einschließlich benutzerdefinierter Webformate. Durch diese Verbesserung wird die Arbeit mit der Zwischenablage robuster und zuverlässiger, was die Nutzerfreundlichkeit in allen Browsern verbessert.