Jak uzyskać bieżący element skryptu:
1. Użyj document.currentScript
document.currentScript
zwróci <script>
element, którego skrypt jest aktualnie przetwarzany.
<script>
var me = document.currentScript;
</script>
Korzyści
- Prosty i wyraźny. Niezawodny.
- Nie trzeba modyfikować tagu skryptu
- Działa ze skryptami asynchronicznymi (
defer
i async
)
- Działa ze skryptami wstawianymi dynamicznie
Problemy
- Nie będzie działać w starszych przeglądarkach i IE.
- Nie działa z modułami
<script type="module">
2. Wybierz skrypt według identyfikatora
Nadanie skryptowi atrybutu id pozwoli ci łatwo wybrać go według identyfikatora z poziomu jego użycia document.getElementById()
.
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Korzyści
- Prosty i wyraźny. Niezawodny.
- Prawie powszechnie obsługiwane
- Działa ze skryptami asynchronicznymi (
defer
i async
)
- Działa ze skryptami wstawianymi dynamicznie
Problemy
- Wymaga dodania niestandardowego atrybutu do znacznika script
id
atrybut może powodować dziwne zachowanie skryptów w niektórych przeglądarkach w niektórych przypadkach krawędzi
3. Wybierz skrypt za pomocą data-*
atrybutu
Nadanie skryptu data-*
atrybutu pozwoli Ci łatwo wybrać go od wewnątrz.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Ma to kilka zalet w porównaniu z poprzednią opcją.
Korzyści
- Prosty i wyraźny.
- Działa ze skryptami asynchronicznymi (
defer
i async
)
- Działa ze skryptami wstawianymi dynamicznie
Problemy
- Wymaga dodania niestandardowego atrybutu do znacznika script
- HTML5 i
querySelector()
niezgodny we wszystkich przeglądarkach
- Mniej powszechnie obsługiwany niż przy użyciu tego
id
atrybutu
- Poradzi sobie
<script>
z id
przypadkowymi skrzyniami.
- Może się mylić, jeśli inny element ma ten sam atrybut danych i wartość na stronie.
4. Wybierz skrypt według src
Zamiast używać atrybutów danych, możesz użyć selektora, aby wybrać skrypt według źródła:
<script src="//example.com/embed.js"></script>
W embed.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Korzyści
- Niezawodny
- Działa ze skryptami asynchronicznymi (
defer
i async
)
- Działa ze skryptami wstawianymi dynamicznie
- Nie są wymagane niestandardowe atrybuty ani identyfikator
Problemy
- Czy nie działają dla skryptów lokalnych
- Powoduje problemy w różnych środowiskach, takich jak rozwój i produkcja
- Statyczny i delikatny. Zmiana położenia pliku skryptu będzie wymagać modyfikacji skryptu
- Mniej powszechnie obsługiwany niż przy użyciu tego
id
atrybutu
- Powoduje problemy, jeśli załadujesz dwukrotnie ten sam skrypt
5. Pętlę nad wszystkimi skryptami, aby znaleźć ten, który chcesz
Możemy również zapętlić każdy element skryptu i sprawdzić każdy z osobna, aby wybrać ten, który chcemy:
<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>
To pozwala nam używać obu poprzednich technik w starszych przeglądarkach, które nie obsługują querySelector()
dobrze atrybutów. Na przykład:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Dziedziczy to korzyści i problemy wynikające z zastosowanego podejścia, ale nie zależy od tego, querySelector()
więc będzie działać w starszych przeglądarkach.
6. Pobierz ostatni wykonany skrypt
Ponieważ skrypty są wykonywane sekwencyjnie, ostatnim elementem skryptu bardzo często będzie aktualnie uruchomiony skrypt:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Korzyści
- Prosty.
- Prawie powszechnie obsługiwane
- Nie są wymagane niestandardowe atrybuty ani identyfikator
Problemy
- Czy nie działa ze skryptami asynchronicznymi (
defer
& async
)
- Czy nie działa ze skryptami wstawionych dynamicznie