So erhalten Sie das aktuelle Skriptelement:
1. Verwenden Sie document.currentScript
document.currentScript gibt die <script> Element, dessen Skript gerade bearbeitet wird.
<script>
var me = document.currentScript;
</script>
Vorteile
- Einfach und eindeutig. Zuverlässig.
- Sie brauchen das Skript-Tag nicht zu ändern
- Arbeitet mit asynchronen Skripten (
defer & async )
- Arbeitet mit dynamisch eingefügten Skripten
Probleme
- Funktioniert nicht in älteren Browsern und IE.
- Funktioniert nicht mit Modulen
<script type="module">
2. Skript nach ID auswählen
Wenn Sie dem Skript ein id-Attribut zuweisen, können Sie es leicht über die id aus der Anwendung heraus auswählen document.getElementById() .
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Vorteile
- Einfach und eindeutig. Zuverlässig.
- Nahezu universell unterstützt
- Arbeitet mit asynchronen Skripten (
defer & async )
- Arbeitet mit dynamisch eingefügten Skripten
Probleme
- Erfordert das Hinzufügen eines benutzerdefinierten Attributs zum Skript-Tag
id Attribut kann in einigen Browsern in einigen Randfällen ein seltsames Verhalten für Skripte verursachen
3. Wählen Sie das Skript mit einem data-* Attribut
Geben Sie dem Skript eine data-* können Sie es leicht von innen heraus auswählen.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Dies hat nur wenige Vorteile gegenüber der vorherigen Option.
Vorteile
- Einfach und eindeutig.
- Arbeitet mit asynchronen Skripten (
defer & async )
- Arbeitet mit dynamisch eingefügten Skripten
Probleme
- Erfordert das Hinzufügen eines benutzerdefinierten Attributs zum Skript-Tag
- HTML5, und
querySelector() nicht mit allen Browsern kompatibel
- Weniger weit verbreitet als die Verwendung des
id Attribut
- Wird sich herumsprechen
<script> avec id Grenzfälle.
- Es kann zu Verwechslungen kommen, wenn ein anderes Element auf der Seite das gleiche Datenattribut und den gleichen Wert hat.
4. Wählen Sie das Skript nach src
Anstatt die Datenattribute zu verwenden, können Sie den Selektor verwenden, um das Skript nach Quelle auszuwählen:
<script src="//example.com/embed.js"></script>
In embed.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Vorteile
- Zuverlässig
- Arbeitet mit asynchronen Skripten (
defer & async )
- Arbeitet mit dynamisch eingefügten Skripten
- Keine benutzerdefinierten Attribute oder id erforderlich
Probleme
- Hat pas Arbeit für lokale Skripte
- Verursacht Probleme in verschiedenen Umgebungen, wie Entwicklung und Produktion
- Statisch und zerbrechlich. Wenn Sie den Speicherort der Skriptdatei ändern, müssen Sie das Skript modifizieren
- Weniger weit verbreitet als die Verwendung des
id Attribut
- Führt zu Problemen, wenn Sie das gleiche Skript zweimal laden
5. Schleife über alle Skripte, um das gewünschte zu finden
Wir können auch jedes Skriptelement in einer Schleife durchlaufen und jedes einzelne überprüfen, um das gewünschte Element 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>
So können wir beide Techniken auch in älteren Browsern verwenden, die keine Unterstützung für querySelector() gut mit Attributen. Zum Beispiel:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Sie übernimmt die Vorteile und Probleme des jeweiligen Ansatzes, verlässt sich aber nicht auf querySelector() funktioniert also auch in älteren Browsern.
6. Abrufen des zuletzt ausgeführten Skripts
Da die Skripte nacheinander ausgeführt werden, ist das letzte Skriptelement sehr oft das aktuell laufende Skript:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Vorteile
- Einfach.
- Nahezu universell unterstützt
- Keine benutzerdefinierten Attribute oder id erforderlich
Probleme
- Hat pas mit asynchronen Skripten arbeiten (
defer & async )
- Hat pas Arbeit mit dynamisch eingefügten Skripten
