HTMLScriptElement.noModule — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.noModule

Beschreibung

Die Eigenschaft noModule von HTMLScriptElement spiegelt das boolesche HTML-Attribut nomodule. Ist es gesetzt, ignorieren Browser mit Unterstützung für ES-Module (<script type="module">) das Skript: Sie laden es nicht herunter und führen es nicht aus. Ältere Browser kennen das Attribut nicht und führen das Skript ganz normal aus.

Genau darauf baut das bekannte module/nomodule-Muster auf: Man liefert ein modernes Bundle als type="module" aus und zusätzlich ein transpiliertes Fallback-Bundle (ES5, mit Polyfills) mit nomodule. So bekommt jeder Browser nur den Code, den er versteht, und moderne Browser laden keinen unnötigen Ballast.

Über JavaScript lässt sich die Eigenschaft lesen und setzen. Beim Setzen auf true wird das Attribut nomodule hinzugefügt, bei false wird es entfernt. Außerdem eignet sich 'noModule' in HTMLScriptElement.prototype als zuverlässige Funktionserkennung für ES-Module.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut nomodule gesetzt ist, sonst false. Das Setzen der Eigenschaft fügt das Attribut hinzu oder entfernt es.

Beispiele

Attribut auslesen

// HTML: <script id="legacy" nomodule src="legacy.js"></script>
const script = document.getElementById('legacy');
console.log(script.noModule);
console.log(script.hasAttribute('nomodule'));

true true

Unterstützung von ES-Modulen erkennen

const supportsModules = 'noModule' in HTMLScriptElement.prototype;
console.log(supportsModules ? 'ES-Module werden unterstützt' : 'Kein Modul-Support');

ES-Module werden unterstützt

module/nomodule-Paar dynamisch einfügen

const loadBundle = (modernSrc, legacySrc) => {
  const modern = document.createElement('script');
  modern.type = 'module';
  modern.src = modernSrc;

  const legacy = document.createElement('script');
  legacy.noModule = true; // setzt das Attribut nomodule
  legacy.src = legacySrc;
  legacy.defer = true;

  document.head.append(modern, legacy);
  console.log(legacy.outerHTML);
};

loadBundle('/js/app.mjs', '/js/app.legacy.js');

Attribut wieder entfernen

const script = document.createElement('script');
script.noModule = true;
console.log(script.getAttribute('nomodule'));
script.noModule = false;
console.log(script.hasAttribute('nomodule'));

"" false

// Wichtig · Fallstricke

Safari 10.1 unterstützt zwar type="module", ignoriert aber nomodule und führt deshalb beide Bundles aus. Abhilfe schafft ein kleiner Workaround-Snippet oder ein Laden per Funktionserkennung.
Einige ältere Browser (z. B. alte Edge-Versionen 16–18 und IE 11) laden das nomodule-Skript bzw. das Modul-Skript unnötigerweise herunter, auch wenn sie es nicht ausführen. Das kostet Bandbreite.
Das Attribut ist boolesch: Auch nomodule="false" im HTML bedeutet gesetzt. Im Code sollte man nur die Eigenschaft noModule oder removeAttribute('nomodule') nutzen.
Auf Skripte mit type="module" hat nomodule keine sinnvolle Wirkung. Verwenden Sie es nur für klassische Skripte.
Da heute praktisch alle relevanten Browser ES-Module unterstützen, ist das Fallback-Muster oft nur noch für Altbrowser-Support nötig. Prüfen Sie Ihre Zielgruppe, bevor Sie zwei Bundles pflegen.

Siehe auch

import HTMLOListElement.compact HTMLScriptElement.defer HTMLScriptElement.type HTMLScriptElement.async