DOMTokenList.supports() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.supports(token)

Beschreibung

supports() dient der Funktionserkennung (Feature Detection) für Attributwerte. Die Methode prüft nicht, ob ein Token gerade in der Liste steht – dafür gibt es contains(). Sie beantwortet stattdessen die Frage, ob der Browser den Token für dieses Attribut überhaupt kennt und verarbeitet. So lässt sich etwa feststellen, ob <link rel="preload"> oder <link rel="modulepreload"> tatsächlich wirkt, bevor man sich darauf verlässt.

Sinnvoll ist die Methode nur für Attribute, für die die HTML-Spezifikation eine Menge unterstützter Tokens festlegt. Die wichtigsten sind:

HTMLLinkElement.relList – z. B. preload, prefetch, preconnect, dns-prefetch, modulepreload, stylesheet
HTMLIFrameElement.sandbox – z. B. allow-scripts, allow-downloads, allow-popups-to-escape-sandbox
relList von <a>, <area> und <form> – z. B. noopener, noreferrer, opener (Unterstützung je nach Browser unterschiedlich)

Der Vergleich ignoriert die ASCII-Groß-/Kleinschreibung: Der Token wird vor der Prüfung in Kleinbuchstaben umgewandelt. Für Token-Listen ohne definierte unterstützte Tokens – etwa element.classList oder output.htmlFor – wirft supports() einen TypeError.

Parameter

Name	Typ	Default	Beschreibung
$token Pflicht	string		Der zu prüfende Token, z. B. `"preload"` oder `"allow-downloads"`. Wird intern in Kleinbuchstaben umgewandelt; Nicht-Strings werden in einen String konvertiert.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Browser den Token für dieses Attribut unterstützt, sonst false. Wirft einen TypeError, wenn für die Liste keine unterstützten Tokens definiert sind.

Beispiele

Preload mit Fallback laden

const preloadFont = (href) => {
  const link = document.createElement('link');

  if (link.relList.supports('preload')) {
    link.rel = 'preload';
    link.as = 'font';
    link.type = 'font/woff2';
    link.crossOrigin = 'anonymous';
  } else {
    // Fallback: niedrigere Priorität, aber breit unterstützt
    link.rel = 'prefetch';
  }

  link.href = href;
  document.head.append(link);
  console.log(`Verwendet: rel="${link.rel}"`);
};

preloadFont('/fonts/inter.woff2');

Verwendet: rel="preload"

Modul-Preload erkennen

const supportsModulePreload = () => {
  const { relList } = document.createElement('link');
  return Boolean(relList?.supports?.('modulepreload'));
};

if (supportsModulePreload()) {
  const link = document.createElement('link');
  link.rel = 'modulepreload';
  link.href = '/js/app.mjs';
  document.head.append(link);
}

console.log('modulepreload:', supportsModulePreload());

modulepreload: true

Sandbox-Flags für ein iframe prüfen

const iframe = document.createElement('iframe');
const wanted = ['allow-scripts', 'allow-downloads', 'allow-foo'];

for (const flag of wanted) {
  if (iframe.sandbox.supports(flag)) {
    iframe.sandbox.add(flag);
  } else {
    console.warn(`Nicht unterstützt: ${flag}`);
  }
}

iframe.src = '/widget.html';
document.body.append(iframe);
console.log(iframe.getAttribute('sandbox'));

Nicht unterstützt: allow-foo allow-scripts allow-downloads

TypeError bei classList abfangen

const el = document.createElement('div');

try {
  el.classList.supports('active');
} catch (err) {
  console.log(err.name);
}

// Groß-/Kleinschreibung spielt keine Rolle
console.log(document.createElement('link').relList.supports('PRELOAD'));

TypeError true

// Wichtig · Fallstricke

Nicht mit contains() verwechseln: supports() sagt nichts darüber, ob der Token im Attribut steht – nur, ob der Browser ihn versteht.
TypeError bei classList: Für Listen ohne definierte unterstützte Tokens (z. B. classList, output.htmlFor) wirft die Methode einen Fehler. Bei generischem Code in try…catch einbetten.
Kompatibilität: In sehr alten Browsern (IE, alter Edge vor Chromium) fehlen relList bzw. supports() teilweise ganz. Mit Optional Chaining absichern: link.relList?.supports?.('preload').
relList bei <a>/<area>/<form>: Die gemeldeten Werte (noopener, noreferrer, opener) variieren je nach Browser und Version – Ergebnis nicht als garantiert betrachten.
Sicherheit: Bei iframe.sandbox nur gezielt benötigte Flags hinzufügen. Die Kombination allow-scripts + allow-same-origin bei gleichem Ursprung hebt die Sandbox praktisch auf.
Ein true bedeutet nur, dass der Token erkannt wird. Es garantiert nicht, dass jede Variante (z. B. jeder as-Wert bei preload) unterstützt wird.

Siehe auch

DOMTokenList.contains() DOMTokenList.add() DOMTokenList.toggle() DOMTokenList HTMLLinkElement.relList HTMLIFrameElement.sandbox Element.classList