Wie finde ich das Skriptelement, das das aktuell ausgeführte JavaScript geladen hat?

So verweisen Sie auf das Skriptelement, das das aktuell ausgeführte Skript geladen hat

Verstehen des Problems

In bestimmten Szenarien müssen Entwickler möglicherweise zusätzliche Elemente dynamisch laden Skripte in das Dokument ein. Allerdings ist die herkömmliche Methode der Verwendung von document.getElementsByTagName('head')[0].appendChild(v) möglicherweise nicht geeignet, wenn das HEAD-Element noch nicht vollständig gerendert wurde.

Lösung: Referenzierung des aktuellen Skripts

Um auf das Skriptelement zu verweisen, das das aktuell ausgeführte Skript geladen hat, können verschiedene Techniken eingesetzt werden:

1. document.currentScript

Vorteile:

• Einfach, explizit und zuverlässig
• Erfordert keine Änderung des Skript-Tags
• Funktioniert mit asynchronen Skripten (aufgeschoben und asynchron)
• Funktioniert mit eingefügten Skripten dynamisch

Einschränkungen:

• Nicht unterstützt in älteren Browsern oder IE
• Funktioniert nicht mit Modulen (

<br><script><br>var me = document.currentScript;<br></script><br>&lt ;/pre><h4 id="Skript-Tag-ID">2. Skript-Tag-ID</h4><p><strong>Vorteile:</strong></p>

• Einfach, explizit und zuverlässig
• Weitgehend unterstützt
• Funktioniert mit asynchronen Skripten (verzögert und asynchron)
• Funktioniert mit eingefügten Skripten dynamisch

Einschränkungen:

• Erfordert das Hinzufügen eines ID-Attributs zum Skript-Tag

<br><script>var me = document.getElementById('myscript');<br></script><br>

3. Auswahl von Datenattributen

Vorteile:

• Einfach und explizit
• Funktioniert mit asynchronen Skripten (aufschieben und asynchron)
• Funktioniert mit eingefügten Skripten dynamisch

Einschränkungen:

• Erfordert das Hinzufügen eines benutzerdefinierten data-*-Attributs zum Skript-Tag
• Weniger weit verbreitet als die Verwendung ID
• Kann zu Verwechslungen mit anderen Elementen führen, die dieselben Daten teilen Attribut

<br><script data-name="myscript"><br>var me = document.querySelector('script[data-name="myscript"] ');<br></script><br>

4. Quellenauswahl

Vorteile:

• Zuverlässig
• Funktioniert mit asynchronen Skripten (aufgeschoben und asynchron)
• Funktioniert mit Skripten Dynamisch eingefügt
• Keine benutzerdefinierten Attribute oder ID erforderlich

Einschränkungen:

• Funktioniert nicht für lokale Skripte
• Verursacht Probleme in verschiedenen Umgebungen (z. B. Entwickler vs. Produkt)
• Statisch und fragil (Änderungen am Skriptspeicherort erfordern Modifikationen)
• Weniger weit verbreitet als die Verwendung von ID
• Es treten Probleme auf, wenn dasselbe Skript mehrfach geladen wird mal

<br><script src="//example.com/embed.js"></script><br>

<br><script><br>var me = document.querySelector('script[src="//example.com/embed.js"]');<br></script><br>

5. Skriptiteration

Vorteile:

• Übernimmt die Vorteile früherer Techniken
• Verlässt sich nicht auf querySelector(), funktioniert also in älteren Browser

Einschränkungen:

• Komplexer und rechenintensiver

<br><br>var me = null;<br>var scripts = document.getElementsByTagName("script")<br>for (var i = 0; i  if (isMe(scripts[i])) {<pre class="brush:php;toolbar:false">me = scripts[i];

}
}

6. Zuletzt ausgeführtes Skript

Vorteile:

• Einfach
• Fast universell unterstützt
• Keine benutzerdefinierten Attribute oder ID erforderlich

Einschränkungen:

• Funktioniert nicht mit asynchronen Skripten (aufgeschoben und asynchron)
• Funktioniert nicht mit eingefügten Skripten dynamisch

<br><script><br>var scripts = document.getElementsByTagName( 'script' );<br>var me = scripts[ scripts.length - 1 ];<br></script><br>

Fazit

Die Wahl der Methode zum Verweisen auf das aktuelle Skriptelement hängt von den spezifischen Anforderungen der Anwendung ab und Unterstützung für verschiedene Browser. Für moderne Browser ist document.currentScript der bevorzugte Ansatz.

Das obige ist der detaillierte Inhalt vonWie finde ich das Skriptelement, das das aktuell ausgeführte JavaScript geladen hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!