ClipboardItem.supports() — Methode · JavaScript-Referenz

Signatur

ClipboardItem.supports(type)

Beschreibung

ClipboardItem.supports() ist eine statische Methode. Sie wird direkt auf der Klasse aufgerufen, nicht auf einer Instanz. Sie gibt synchron true zurück, wenn der Browser den angegebenen MIME-Typ in einem ClipboardItem verarbeiten und mit navigator.clipboard.write() in die Zwischenablage schreiben kann. Andernfalls gibt sie false zurück.

Die Methode ist gut für Feature-Detection vor dem Schreiben. Statt ein ClipboardItem mit einem nicht unterstützten Typ zu bauen und auf einen abgelehnten Promise zu warten, prüfst du vorher, welche Formate gehen. So kannst du gezielt auf ein anderes Format ausweichen, zum Beispiel von image/svg+xml auf image/png oder von text/html auf text/plain.

Laut Spezifikation müssen Browser mindestens text/plain, text/html und image/png unterstützen. Dazu kommen je nach Browser weitere Typen (etwa image/svg+xml) und eigene Web-Formate mit dem Präfix "web ", zum Beispiel "web application/x-meine-app". Solche Formate kann nur eine Web-Anwendung lesen, die sie kennt.

Wichtig: supports() sagt nur, ob ein Format grundsätzlich unterstützt wird. Ob der Schreibvorgang klappt, hängt noch von anderen Dingen ab: Berechtigungen, einer Nutzeraktion (User Activation), dem Fokus des Dokuments und einem sicheren Kontext (HTTPS).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der zu prüfende MIME-Typ, z. B. `"text/plain"`, `"text/html"`, `"image/png"` oder ein eigenes Web-Format wie `"web application/x-meine-app"`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der MIME-Typ für die Zwischenablage unterstützt wird, sonst false.

Beispiele

Unterstützte Formate abfragen

const typen = ['text/plain', 'text/html', 'image/png', 'image/jpeg', 'image/svg+xml'];

if ('supports' in ClipboardItem) {
  for (const typ of typen) {
    console.log(`${typ}: ${ClipboardItem.supports(typ)}`);
  }
} else {
  console.log('ClipboardItem.supports() wird nicht unterstützt');
}

text/plain: true text/html: true image/png: true image/jpeg: false image/svg+xml: true // je nach Browser

Bild kopieren mit Ausweichformat (SVG → PNG)

const kopiereGrafik = async (svgBlob, pngBlob) => {
  // SVG bevorzugen, wenn der Browser es kann, sonst PNG
  const hatSupports = typeof ClipboardItem.supports === 'function';
  const svgOk = hatSupports && ClipboardItem.supports('image/svg+xml');

  const item = svgOk
    ? new ClipboardItem({ 'image/svg+xml': svgBlob, 'image/png': pngBlob })
    : new ClipboardItem({ 'image/png': pngBlob });

  await navigator.clipboard.write([item]);
  console.log(svgOk ? 'SVG + PNG kopiert' : 'Nur PNG kopiert');
};

// Aufruf in einem Klick-Handler (Nutzeraktion erforderlich)
document.querySelector('#kopieren').addEventListener('click', async () => {
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10"/></svg>';
  const svgBlob = new Blob([svg], { type: 'image/svg+xml' });
  const pngBlob = await (await fetch('/logo.png')).blob();
  await kopiereGrafik(svgBlob, pngBlob);
});

SVG + PNG kopiert

Eigenes Web-Format mit Text-Ausweichformat

const kopiereDaten = async (daten) => {
  const json = JSON.stringify(daten);
  const eintraege = {
    'text/plain': new Blob([json], { type: 'text/plain' })
  };

  const eigenesFormat = 'web application/x-todo+json';
  if (ClipboardItem.supports?.(eigenesFormat)) {
    eintraege[eigenesFormat] = new Blob([json], { type: 'application/x-todo+json' });
  }

  await navigator.clipboard.write([new ClipboardItem(eintraege)]);
  console.log('Kopierte Formate:', Object.keys(eintraege));
};

document.querySelector('#todo-kopieren').addEventListener('click', () =>
  kopiereDaten({ titel: 'Einkaufen', erledigt: false })
);

Kopierte Formate: ['text/plain', 'web application/x-todo+json']

// Wichtig · Fallstricke

Kompatibilität: supports() gibt es erst seit Kurzem (Chromium 121+, Firefox 127+, Safari 17.4+). Ältere Browser kennen zwar ClipboardItem, aber nicht diese Methode. Prüfe deshalb vorher mit typeof ClipboardItem.supports === 'function' oder mit optionaler Verkettung (ClipboardItem.supports?.(typ)).
Statische Methode: Ein Aufruf auf einer Instanz (item.supports()) wirft einen TypeError.
Kein Rechte-Check: Ein Rückgabewert von true heißt nicht, dass navigator.clipboard.write() klappt. Der Schreibvorgang braucht trotzdem einen sicheren Kontext (HTTPS), meist eine Nutzeraktion und ein Dokument im Fokus.
Nicht unterstützte Typen: image/jpeg oder image/gif geben oft false zurück. Wandle solche Bilder vorher über ein <canvas> in PNG um.
Web-Formate: Eigene Formate funktionieren nur mit dem Präfix "web " (mit Leerzeichen). Native Anwendungen können sie in der Regel nicht lesen. Gib deshalb immer auch ein Standardformat wie text/plain mit.
Der Aufruf läuft synchron und ist schnell. Du kannst das Ergebnis aber zwischenspeichern, wenn du es oft brauchst.

Siehe auch

ClipboardItem new ClipboardItem() ClipboardItem.types ClipboardItem.prototype.getType() Clipboard.prototype.write() Clipboard.prototype.read() Clipboard.prototype.writeText() Navigator.clipboard