Como obter o elemento de script atual:
1. Use document.currentScript
document.currentScriptretornará o <script>elemento cujo script está sendo processado no momento.
<script>
var me = document.currentScript;
</script>
Benefícios
- Simples e explícito. Confiável.
- Não precisa modificar a tag de script
- Funciona com scripts assíncronos (
defer& async)
- Funciona com scripts inseridos dinamicamente
Problemas
- Não funcionará em navegadores mais antigos e no IE.
- Não funciona com módulos
<script type="module">
2. Selecione o script por id
Ao atribuir ao script um atributo id, você poderá selecioná-lo facilmente por id de dentro do uso document.getElementById().
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Benefícios
- Simples e explícito. Confiável.
- Quase universalmente suportado
- Funciona com scripts assíncronos (
defer& async)
- Funciona com scripts inseridos dinamicamente
Problemas
- Requer a adição de um atributo personalizado à tag de script
id atributo pode causar um comportamento estranho para scripts em alguns navegadores para alguns casos extremos
3. Selecione o script usando um data-*atributo
data-*Atribuir um atributo ao script permitirá que você o selecione facilmente de dentro.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Isso tem poucos benefícios em relação à opção anterior.
Benefícios
- Simples e explícito.
- Funciona com scripts assíncronos (
defer& async)
- Funciona com scripts inseridos dinamicamente
Problemas
- Requer a adição de um atributo personalizado à tag de script
- HTML5 e
querySelector()não compatível em todos os navegadores
- Menos suportado do que usar o
idatributo
- Vai dar a volta
<script>com idcasos de ponta.
- Pode ficar confuso se outro elemento tiver o mesmo atributo e valor de dados na página.
4. Selecione o script por src
Em vez de usar os atributos de dados, você pode usar o seletor para escolher o script pela origem:
<script src="//example.com/embed.js"></script>
No embed.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Benefícios
- Confiável
- Funciona com scripts assíncronos (
defer& async)
- Funciona com scripts inseridos dinamicamente
- Nenhum atributo ou ID personalizado é necessário
Problemas
- Será que não funciona para scripts locais
- Causará problemas em diferentes ambientes, como Desenvolvimento e Produção
- Estático e frágil. Alterar a localização do arquivo de script exigirá a modificação do script
- Menos suportado do que usar o
idatributo
- Causará problemas se você carregar o mesmo script duas vezes
5. Passe por todos os scripts para encontrar o que você deseja
Também podemos percorrer todos os elementos do script e verificar cada um individualmente para selecionar o que queremos:
<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>
Isso nos permite usar as duas técnicas anteriores em navegadores mais antigos que não suportam querySelector()bem os atributos. Por exemplo:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Isso herda os benefícios e os problemas de qualquer abordagem adotada, mas não depende disso, querySelector()pois funcionará em navegadores mais antigos.
6. Obtenha o último script executado
Como os scripts são executados sequencialmente, o último elemento do script muitas vezes será o script em execução no momento:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Benefícios
- Simples.
- Quase universalmente suportado
- Nenhum atributo ou ID personalizado é necessário
Problemas
- Será que não trabalhar com scripts assíncronos (
defer& async)
- Será que não trabalhar com scripts inseridos dinamicamente