Come ottenere l'elemento di script corrente:
1. Usa document.currentScript
document.currentScriptrestituirà l' <script>elemento il cui script è attualmente in fase di elaborazione.
<script>
var me = document.currentScript;
</script>
Benefici
- Semplice ed esplicito. Affidabile.
- Non è necessario modificare il tag dello script
- Funziona con script asincroni (
defer& async)
- Funziona con script inseriti in modo dinamico
I problemi
- Non funzionerà nei browser e IE precedenti.
- Non funziona con i moduli
<script type="module">
2. Seleziona lo script per ID
Dare allo script un attributo id ti permetterà di selezionarlo facilmente per id dall'interno document.getElementById().
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Benefici
- Semplice ed esplicito. Affidabile.
- Quasi universalmente supportato
- Funziona con script asincroni (
defer& async)
- Funziona con script inseriti in modo dinamico
I problemi
- Richiede l'aggiunta di un attributo personalizzato al tag dello script
id l'attributo può causare comportamenti strani per gli script in alcuni browser per alcuni casi limite
3. Selezionare lo script utilizzando un data-*attributo
Dare allo script un data-*attributo ti permetterà di selezionarlo facilmente dall'interno.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Ciò ha pochi vantaggi rispetto all'opzione precedente.
Benefici
- Semplice ed esplicito.
- Funziona con script asincroni (
defer& async)
- Funziona con script inseriti in modo dinamico
I problemi
- Richiede l'aggiunta di un attributo personalizzato al tag dello script
- HTML5 e
querySelector()non conforme in tutti i browser
- Meno ampiamente supportato rispetto all'uso
iddell'attributo
- Andrà in giro
<script>con idcasi limite.
- Potrebbe essere confuso se un altro elemento ha lo stesso attributo e valore di dati sulla pagina.
4. Seleziona lo script per src
Invece di usare gli attributi dei dati, puoi usare il selettore per scegliere lo script per fonte:
<script src="//example.com/embed.js"></script>
In embed.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Benefici
- Affidabile
- Funziona con script asincroni (
defer& async)
- Funziona con script inseriti in modo dinamico
- Non sono necessari attributi o ID personalizzati
I problemi
- Does non lavorare per gli script locali
- Causerà problemi in diversi ambienti, come sviluppo e produzione
- Statico e fragile. La modifica del percorso del file di script richiederà la modifica dello script
- Meno ampiamente supportato rispetto all'uso
iddell'attributo
- Causerà problemi se carichi lo stesso script due volte
5. Scorri tutti gli script per trovare quello che desideri
Possiamo anche passare in rassegna ogni elemento dello script e controllarli singolarmente per selezionare quello che vogliamo:
<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>
Questo ci consente di utilizzare entrambe le tecniche precedenti nei browser meno recenti che non supportano querySelector()bene gli attributi. Per esempio:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Ciò eredita i vantaggi e i problemi di qualsiasi approccio venga adottato, ma non si basa su di esso, querySelector()quindi funzionerà nei browser più vecchi.
6. Ottieni l'ultimo script eseguito
Poiché gli script vengono eseguiti in sequenza, l'ultimo elemento dello script sarà molto spesso lo script attualmente in esecuzione:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Benefici
- Semplice.
- Quasi universalmente supportato
- Non sono necessari attributi o ID personalizzati
I problemi
- Non non lavorare con gli script asincroni (
defer& async)
- Non non lavorare con gli script inseriti in modo dinamico