So erhalten Sie das aktuelle Skriptelement:
1. Verwenden Sie document.currentScript
document.currentScript
gibt das <script>
Element zurück, dessen Skript gerade verarbeitet wird.
<script>
var me = document.currentScript;
</script>
Leistungen
- Einfach und explizit. Zuverlässig.
- Das Skript-Tag muss nicht geändert werden
- Funktioniert mit asynchronen Skripten (
defer
& async
)
- Funktioniert mit dynamisch eingefügten Skripten
Probleme
- Funktioniert nicht in älteren Browsern und im Internet Explorer.
- Funktioniert nicht mit Modulen
<script type="module">
2. Wählen Sie das Skript anhand der ID aus
Wenn Sie dem Skript ein ID-Attribut geben, können Sie es einfach anhand der ID von innen auswählen document.getElementById()
.
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Leistungen
- Einfach und explizit. Zuverlässig.
- Fast universell unterstützt
- Funktioniert mit asynchronen Skripten (
defer
& async
)
- Funktioniert mit dynamisch eingefügten Skripten
Probleme
- Erfordert das Hinzufügen eines benutzerdefinierten Attributs zum Skript-Tag
id
Das Attribut kann in einigen Browsern in einigen Randfällen zu einem merkwürdigen Verhalten von Skripten führen
3. Wählen Sie das Skript mit einem data-*
Attribut aus
Wenn Sie dem Skript ein data-*
Attribut geben, können Sie es einfach von innen auswählen.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Dies hat gegenüber der vorherigen Option nur wenige Vorteile.
Leistungen
- Einfach und explizit.
- Funktioniert mit asynchronen Skripten (
defer
& async
)
- Funktioniert mit dynamisch eingefügten Skripten
Probleme
- Erfordert das Hinzufügen eines benutzerdefinierten Attributs zum Skript-Tag
- HTML5 und
querySelector()
nicht in allen Browsern kompatibel
- Weniger weit verbreitet als die Verwendung des
id
Attributs
- Bekomme um
<script>
mit id
Rand Fällen.
- Kann verwirrt werden, wenn ein anderes Element dasselbe Datenattribut und denselben Wert auf der Seite hat.
4. Wählen Sie das Skript von src aus
Anstatt die Datenattribute zu verwenden, können Sie den Skript mithilfe des Selektors nach Quelle auswählen:
<script src="//example.com/embed.js"></script>
In embedded.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Leistungen
- Zuverlässig
- Funktioniert mit asynchronen Skripten (
defer
& async
)
- Funktioniert mit dynamisch eingefügten Skripten
- Keine benutzerdefinierten Attribute oder ID erforderlich
Probleme
- Funktioniert nicht für lokale Skripte
- Verursacht Probleme in verschiedenen Umgebungen wie Entwicklung und Produktion
- Statisch und zerbrechlich. Um den Speicherort der Skriptdatei zu ändern, muss das Skript geändert werden
- Weniger weit verbreitet als die Verwendung des
id
Attributs
- Verursacht Probleme, wenn Sie dasselbe Skript zweimal laden
5. Durchlaufen Sie alle Skripte, um das gewünschte zu finden
Wir können auch jedes Skriptelement durchlaufen und jedes einzeln überprüfen, um das gewünschte auszuwählen:
<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
if( isMe(scripts[i])){
me = scripts[i];
}
}
</script>
Auf diese Weise können wir beide vorherigen Techniken in älteren Browsern verwenden, die querySelector()
Attribute nicht gut unterstützen . Zum Beispiel:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Dies erbt die Vorteile und Probleme eines jeden Ansatzes, ist jedoch nicht darauf angewiesen, querySelector()
dass dies in älteren Browsern funktioniert.
6. Holen Sie sich das zuletzt ausgeführte Skript
Da die Skripte nacheinander ausgeführt werden, ist das letzte Skriptelement sehr oft das aktuell ausgeführte Skript:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Leistungen
- Einfach.
- Fast universell unterstützt
- Keine benutzerdefinierten Attribute oder ID erforderlich
Probleme
- Funktioniert nicht mit asynchronen Skripten (
defer
& async
)
- Funktioniert nicht mit dynamisch eingefügten Skripten