HTMLScriptElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <script>
Elemente stellen das HTMLScriptElement
Interface bereit, welches spezielle Eigenschaften und Methoden zur Verfügung stellt, um das Verhalten und die Ausführung von <script>
Elementen zu manipulieren (zusätzlich zu den geerbten Eigenschaften des HTMLElement
Interface).
JavaScript-Dateien sollten mit dem text/javascript
MIME-Typ bereitgestellt werden, aber Browser sind nachsichtig und blockieren sie nur, wenn das Skript mit einem Bildtyp (image/*
), Videotyp (video/*
), Audiotyp (audio/*
) oder text/csv
bereitgestellt wird. Wenn das Skript blockiert wird, erhält das Element ein error
Ereignis; andernfalls erhält es ein load
Ereignis.
Instanz-Eigenschaften
Übernimmt Eigenschaften von seinem übergeordneten Objekt, HTMLElement
.
HTMLScriptElement.attributionSrc
Secure context Experimentell-
Erhält und setzt das
attributionsrc
Attribut auf einem<script>
Element programmatisch und spiegelt den Wert dieses Attributs wider.attributionsrc
gibt an, dass der Browser einenAttribution-Reporting-Eligible
Header zusammen mit der Skript-Ressourcenanfrage senden soll. Serverseitig wird dies verwendet, um das Senden einesAttribution-Reporting-Register-Source
oderAttribution-Reporting-Register-Trigger
Headers in der Antwort auszulösen, um eine JavaScript-basierte Attributionsquelle oder Attributionstrigger entsprechend zu registrieren. HTMLScriptElement.async
-
Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn die
async
Eigenschaft auftrue
gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und bewertet, sobald es verfügbar ist. Für Modul-Skripte wird das Skript und alle seine Abhängigkeiten parallel zum Parsen abgerufen und bewertet, sobald sie verfügbar sind. HTMLScriptElement.blocking
Experimentell-
Ein String, der anzeigt, dass bestimmte Operationen beim Abrufen des Skripts blockiert werden sollten. Er reflektiert das
blocking
Attribut des<script>
Elements. HTMLScriptElement.charset
Veraltet-
Ein String, der die Zeichenkodierung eines externen Skripts darstellt. Er spiegelt das
charset
Attribut wider. HTMLScriptElement.crossOrigin
-
Ein String, der die CORS-Einstellung für das Skriptelement reflektiert. Für klassische Skripte aus anderen Ursprüngen steuert dies, ob Fehlermeldungen offengelegt werden.
HTMLScriptElement.defer
-
Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn die
defer
Eigenschaft auftrue
gesetzt ist, wird das externe Skript nach dem Parsen des Dokuments ausgeführt, aber bevor dasDOMContentLoaded
Ereignis ausgelöst wird. Für Modul-Skripte hat diedefer
Eigenschaft keine Auswirkung. HTMLScriptElement.event
Veraltet-
Ein String; eine veraltete Methode zum Registrieren von Ereignishandlern für Elemente in einem HTML-Dokument.
HTMLScriptElement.fetchPriority
-
Ein optionaler String, der dem Browser einen Hinweis gibt, wie er das Abrufen eines externen Skripts im Vergleich zu anderen externen Skripten priorisieren soll. Wenn dieser Wert angegeben wird, muss er einer der möglichen zulässigen Werte sein:
high
, um mit hoher Priorität abzurufen,low
, um mit niedriger Priorität abzurufen, oderauto
, um keine Präferenz anzugeben (was der Standard ist). Er reflektiert dasfetchpriority
Attribut des<script>
Elements. HTMLScriptElement.integrity
-
Ein String, der Inline-Metadaten enthält, die ein Browser verwenden kann, um zu überprüfen, ob eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Er spiegelt das
integrity
Attribut des<script>
Elements wider. HTMLScriptElement.noModule
-
Ein boolescher Wert, der, wenn er wahr ist, die Ausführung des Skripts in Browsern, die ES-Module unterstützen, stoppt — dient dazu, Ersatzskripte in älteren Browsern auszuführen, die keine JavaScript-Module unterstützen.
HTMLScriptElement.referrerPolicy
-
Ein String, der das
referrerPolicy
HTML-Attribut reflektiert, das angibt, welcher Referrer beim Abrufen des Skripts und der von diesem Skript durchgeführten Abrufe verwendet werden soll. HTMLScriptElement.src
-
Ein String, der die URL eines externen Skripts darstellt; dies kann als Alternative zur direkten Einbettung eines Skripts innerhalb eines Dokuments verwendet werden. Er spiegelt das
src
Attribut des<script>
Elements wider. HTMLScriptElement.text
-
Ein String, der den Inhalt aller
Text
-Knoten innerhalb des<script>
Elements (unter Ausschluss anderer Knoten wie Kommentare) in Baumreihenfolge zusammenfasst und zurückgibt. Beim Setzen verhält er sich genauso wie dieNode.textContent
Eigenschaft.Hinweis: Wenn einfügt über die
Document.write()
Methode, werden<script>
Elemente (typischerweise synchron) ausgeführt, aber wenn sie mitElement.innerHTML
oderElement.outerHTML
eingefügt werden, werden sie überhaupt nicht ausgeführt. HTMLScriptElement.type
-
Ein String, der den Typ des Skripts darstellt. Er spiegelt das
type
Attribut des<script>
Elements wider.
Statische Methoden
HTMLScriptElement.supports()
-
Gibt
true
zurück, wenn der Browser Skripte des angegebenen Typs unterstützt, undfalse
andernfalls. Diese Methode bietet eine einfache und einheitliche Methode zur skriptbezogenen Feature-Erkennung.
Instanz-Methoden
Keine spezifischen Methoden; erbt Methoden von seiner übergeordneten Klasse, HTMLElement
.
Ereignisse
Keine spezifischen Ereignisse; erbt Ereignisse von seiner übergeordneten Klasse, HTMLElement
.
Beispiele
Dynamisches Importieren von Skripten
Lassen Sie uns eine Funktion erstellen, die neue Skripte in ein Dokument importiert, indem unmittelbar vor dem <script>
, das den folgenden Code hostet (durch document.currentScript
), ein <script>
-Knoten erstellt wird. Diese Skripte werden asynchron ausgeführt. Weitere Details finden Sie in den Eigenschaften defer
und async
.
function loadError(oError) {
throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}
function prefixScript(url, onloadFunction) {
const newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) {
newScript.onload = onloadFunction;
}
document.currentScript.parentNode.insertBefore(
newScript,
document.currentScript,
);
newScript.src = url;
}
Diese nächste Funktion hängt die neuen Skripte als Kinder des <head>
Tags an, anstatt sie unmittelbar vor dem document.currentScript
Element vorzusetzen.
function loadError(oError) {
throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}
function affixScriptToHead(url, onloadFunction) {
const newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) {
newScript.onload = onloadFunction;
}
document.head.appendChild(newScript);
newScript.src = url;
}
Beispielnutzung:
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
alert('The script "myScript2.js" has been correctly loaded.');
});
Überprüfen, ob ein Skripttyp unterstützt wird
HTMLScriptElement.supports()
bietet einen einheitlichen Mechanismus, um zu überprüfen, ob ein Browser bestimmte Skripttypen unterstützt.
Das folgende Beispiel zeigt, wie man die Unterstützung von Modulen überprüfen kann, indem das Vorhandensein des noModule
Attributs als Fallback verwendet wird.
function checkModuleSupport() {
if ("supports" in HTMLScriptElement) {
return HTMLScriptElement.supports("module");
}
return "noModule" in document.createElement("script");
}
Klassische Skripte werden auf allen Browsern als unterstützt angenommen.
Spezifikationen
Specification |
---|
HTML Standard # htmlscriptelement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- HTML
<script>
Element - HTML
<noscript>
Element document.currentScript
- Web Workers (Code-Snippets ähnlich wie Skripte, aber in einem anderen globalen Kontext ausgeführt)