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-Elemente <script>
legen die HTMLScriptElement
-Schnittstelle offen, die spezielle Eigenschaften und Methoden zum Manipulieren des Verhaltens und der Ausführung von <script>
-Elementen bietet (zusätzlich zur geerbten HTMLElement
-Schnittstelle).
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 sein Element ein error
-Ereignis; andernfalls erhält es ein load
-Ereignis.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Elternteil, HTMLElement
.
HTMLScriptElement.attributionSrc
Secure context Experimentell-
Ruft das
attributionsrc
-Attribut eines<script>
-Elements programmgesteuert ab und setzt es, wodurch der Wert dieses Attributs wiedergespiegelt wird.attributionsrc
gibt an, dass Sie den Browser anweisen möchten, einenAttribution-Reporting-Eligible
-Header zusammen mit der Skriptanforderung zu senden. Auf der Serverseite 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 einen Attribution-Trigger zu registrieren. HTMLScriptElement.async
-
Ein Boolean-Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn die
async
-Eigenschaft auftrue
gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und ausgewertet, sobald es verfügbar ist. Bei Modulscripten, wenn dieasync
-Eigenschaft auftrue
gesetzt ist, werden das Skript und alle ihre Abhängigkeiten parallel zum Parsen abgerufen und ausgewertet, sobald sie verfügbar sind. HTMLScriptElement.blocking
-
Ein String, der angibt, dass bestimmte Operationen beim Abrufen des Skripts blockiert werden sollen. Er spiegelt das
blocking
-Attribut des<script>
-Elements wider. 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 widerspiegelt. Bei klassischen Skripten von anderen Ursprüngen steuert dies, ob Fehlerinformationen offengelegt werden.
HTMLScriptElement.defer
-
Ein Boolean-Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn die
defer
-Eigenschaft auftrue
gesetzt ist, wird das externe Skript nach dem Parsen des Dokuments ausgeführt, aber vor dem Auslösen desDOMContentLoaded
-Ereignisses. Bei Modulscripten hat diedefer
-Eigenschaft keine Auswirkungen. HTMLScriptElement.event
Veraltet-
Ein String; eine veraltete Methode zum Registrieren von Ereignishandlern auf Elementen in einem HTML-Dokument.
HTMLScriptElement.fetchPriority
-
Ein optionaler String, der dem Browser einen Hinweis darauf gibt, wie das Abrufen eines externen Skripts im Verhältnis zu anderen externen Skripten priorisiert werden soll. Wenn dieser Wert angegeben wird, muss er einer der möglichen erlaubten Werte sein:
high
für hohe Priorität,low
für niedrige Priorität oderauto
für keine Präferenz (was der Standard ist). Er spiegelt dasfetchpriority
-Attribut des<script>
-Elements wider. HTMLScriptElement.integrity
-
Ein String, der 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 Boolean-Wert, der, wenn
true
, die Ausführung des Skripts in Browsern stoppt, die ES-Module unterstützen — verwendet, um Fallback-Skripte in älteren Browsern auszuführen, die JavaScript-Module nicht unterstützen. HTMLScriptElement.referrerPolicy
-
Ein String, der das
referrerPolicy
HTML-Attribut widerspiegelt, das angibt, welchen Referrer beim Abrufen des Skripts und durch das Skript durchgeführte Abrufe verwendet werden soll. HTMLScriptElement.src
-
Ein String, der die URL eines externen Skripts darstellt; dies kann anstelle der direkten Einbettung eines Skripts in ein Dokument verwendet werden. Er spiegelt das
src
-Attribut des<script>
-Elements wider. HTMLScriptElement.text
-
Ein String, der die Inhalte von allen
Text
-Knoten innerhalb des<script>
-Elements in Baumreihenfolge verbindet und zurückgibt (andere Knoten wie Kommentare werden ignoriert). Bei der Einstellung wirkt es genauso wie dieNode.textContent
-Eigenschaft.Hinweis: Wenn sie mit der Methode
Document.write()
eingefügt werden, führen sich<script>
-Elemente aus (typischerweise synchron), aber wenn sie mitElement.innerHTML
oderElement.outerHTML
eingefügt werden, führen sie sich überhaupt nicht aus. 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 Feature-Erkennung in Bezug auf Skripte.
Instanz-Methoden
Keine spezifischen Methoden; erbt Methoden von seinem Elternteil, HTMLElement
.
Ereignisse
Keine spezifischen Ereignisse; erbt Ereignisse von seinem Elternteil, HTMLElement
.
Beispiele
Dynamisches Importieren von Skripten
Lassen Sie uns eine Funktion erstellen, die neue Skripte innerhalb eines Dokuments importiert, indem ein <script>
-Knoten unmittelbar vor dem <script>
hinzugefügt wird, das den folgenden Code hostet (über document.currentScript
).
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;
}
Die nächste Funktion, anstatt die neuen Skripte unmittelbar vor dem document.currentScript
Element voranzustellen, hängt sie als Kinder des <head>
-Tags an.
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;
}
Beispielanwendung:
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 Modulunterstützung überprüft, unter Verwendung der Existenz des noModule
-Attributs als Fallback.
function checkModuleSupport() {
if ("supports" in HTMLScriptElement) {
return HTMLScriptElement.supports("module");
}
return "noModule" in document.createElement("script");
}
Es wird angenommen, dass klassische Skripte von allen Browsern unterstützt werden.
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)