HTMLScriptElement.supports() — Methode · JavaScript-Referenz

Signatur

HTMLScriptElement.supports(type)

Beschreibung

HTMLScriptElement.supports() ist eine statische Methode. Man ruft sie direkt an der Schnittstelle auf und nicht an einem <script>-Element. Sie gibt true zurück, wenn der Browser den angegebenen Wert des type-Attributs versteht und das Skript entsprechend verarbeiten würde.

Früher musste man Unterstützung umständlich erkennen, etwa über 'noModule' in document.createElement('script') oder mit Tricks für Import-Maps. supports() ersetzt diese Umwege durch eine einheitliche und zuverlässige Abfrage. Das ist besonders nützlich, wenn man zur Laufzeit entscheiden will, ob man eine Import-Map einfügt, Module lädt oder Spekulationsregeln (Prerender/Prefetch) setzt.

Diese Werte werden derzeit von der Spezifikation erkannt:

"classic": klassische Skripte (werden immer unterstützt)
"module": ES-Module
"importmap": Import-Maps
"speculationrules": Spekulationsregeln (bisher nur in Chromium-Browsern)

Für alle anderen Zeichenketten gibt die Methode false zurück. Das gilt auch für MIME-Typen wie "text/javascript", obwohl diese im type-Attribut gültig sind.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der zu prüfende Skripttyp als Zeichenkette, z. B. `"classic"`, `"module"`, `"importmap"` oder `"speculationrules"`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Browser den Skripttyp unterstützt, sonst false.

Beispiele

Unterstützte Skripttypen auflisten

const types = ['classic', 'module', 'importmap', 'speculationrules', 'text/javascript'];

// Erst prüfen, ob es die Methode überhaupt gibt
if (typeof HTMLScriptElement.supports === 'function') {
  for (const type of types) {
    console.log(`${type}: ${HTMLScriptElement.supports(type)}`);
  }
} else {
  console.log('HTMLScriptElement.supports() wird nicht unterstützt');
}

classic: true module: true importmap: true speculationrules: true text/javascript: false (Ausgabe in Chrome; in Firefox/Safari ist speculationrules: false)

Import-Map nur bei Unterstützung einfügen

const supportsImportMap = () =>
  typeof HTMLScriptElement.supports === 'function' &&
  HTMLScriptElement.supports('importmap');

if (supportsImportMap()) {
  const map = document.createElement('script');
  map.type = 'importmap';
  map.textContent = JSON.stringify({
    imports: { lodash: 'https://cdn.jsdelivr.net/npm/lodash-es@4/lodash.js' }
  });
  // Muss vor dem ersten Modul-Import eingefügt werden
  document.head.append(map);
} else {
  // Ersatzlösung: gebündelte Datei laden
  const legacy = document.createElement('script');
  legacy.src = '/dist/bundle.legacy.js';
  document.head.append(legacy);
}

Spekulationsregeln für Prerendering setzen

const addPrerender = (urls) => {
  if (!HTMLScriptElement.supports?.('speculationrules')) {
    // Ersatz: klassisches Prefetch per <link>
    for (const href of urls) {
      const link = document.createElement('link');
      link.rel = 'prefetch';
      link.href = href;
      document.head.append(link);
    }
    return 'prefetch';
  }
  const rules = document.createElement('script');
  rules.type = 'speculationrules';
  rules.textContent = JSON.stringify({ prerender: [{ source: 'list', urls }] });
  document.body.append(rules);
  return 'prerender';
};

console.log(addPrerender(['/produkte', '/warenkorb']));

prerender (in Chromium) bzw. prefetch (in anderen Browsern)

// Wichtig · Fallstricke

Statisch: document.createElement('script').supports('module') funktioniert nicht und löst einen TypeError aus. Richtig ist HTMLScriptElement.supports('module').
Selbst auf Vorhandensein prüfen: Ältere Browser kennen die Methode nicht, zum Beispiel Safari vor Version 16 oder Chrome vor Version 96. Vor dem Aufruf sollte man deshalb mit typeof HTMLScriptElement.supports === 'function' oder optionaler Verkettung (?.()) prüfen. Fehlt die Methode, heißt das nicht automatisch, dass Module fehlen. Für Module ist dann 'noModule' in HTMLScriptElement.prototype eine brauchbare Ersatzprüfung.
Keine MIME-Typen: "text/javascript" oder "application/javascript" ergeben false, obwohl der Browser solche Skripte ausführt. Die Methode prüft nur die in der Spezifikation festgelegten Skripttyp-Schlüsselwörter.
Groß- und Kleinschreibung: Nach Spezifikation zählt nur die exakte Kleinschreibung. Verlässlich sind daher nur Werte wie "module", nicht "Module".
Import-Maps: Selbst wenn true zurückkommt, muss die Import-Map vor dem ersten Modul-Import im Dokument stehen. Sonst wird sie ignoriert oder es wird ein Fehler gemeldet.
"speculationrules" wird bisher nur von Chromium-Browsern unterstützt (Chrome, Edge, Opera).

Siehe auch

import CSS.supports() HTMLSelectElement.remove() HTMLFormElement.submit() HTMLInputElement.select()