Comment obtenir l'élément script actuel :
1. Utilisez document.currentScript
document.currentScript retournera le <script> dont le script est en cours de traitement.
<script>
var me = document.currentScript;
</script>
Avantages
- Simple et explicite. Fiable.
- Il n'est pas nécessaire de modifier la balise script.
- Fonctionne avec les scripts asynchrones (
defer & async )
- Fonctionne avec les scripts insérés dynamiquement
Problèmes
- Ne fonctionnera pas dans les anciens navigateurs et dans IE.
- Ne fonctionne pas avec les modules
<script type="module">
2. Sélectionner script par id
Donner au script un attribut id vous permettra de le sélectionner facilement par id à partir de l'intérieur en utilisant document.getElementById() .
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Avantages
- Simple et explicite. Fiable.
- Un soutien quasi universel
- Fonctionne avec les scripts asynchrones (
defer & async )
- Fonctionne avec les scripts insérés dynamiquement
Problèmes
- Nécessite l'ajout d'un attribut personnalisé à la balise script.
-
id peut provoquer un comportement bizarre pour les scripts dans certains navigateurs pour certains cas limites.
3. Sélectionnez le script à l'aide d'une touche data-* attribut
Donner à la script une data-* vous permettra de le sélectionner facilement à l'intérieur.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Cette option présente peu d'avantages par rapport à l'option précédente.
Avantages
- Simple et explicite.
- Fonctionne avec les scripts asynchrones (
defer & async )
- Fonctionne avec les scripts insérés dynamiquement
Problèmes
- Nécessite l'ajout d'un attribut personnalisé à la balise script.
- HTML5, et
querySelector() non compatible avec tous les navigateurs
- Moins bien supporté que l'utilisation de la
id attribut
- Se déplaceront
<script> con id les cas limites.
- Il peut y avoir confusion si un autre élément possède le même attribut de données et la même valeur sur la page.
4. Sélectionner le script par src
Au lieu d'utiliser les attributs de données, vous pouvez utiliser le sélecteur pour choisir le script par source :
<script src="//example.com/embed.js"></script>
Dans embed.js :
var me = document.querySelector('script[src="//example.com/embed.js"]');
Avantages
- Fiable
- Fonctionne avec les scripts asynchrones (
defer & async )
- Fonctionne avec les scripts insérés dynamiquement
- Aucun attribut ou identifiant personnalisé n'est nécessaire
Problèmes
- Fait no travail pour les scripts locaux
- causera des problèmes dans différents environnements, comme le développement et la production.
- Statique et fragile. Changer l'emplacement du fichier script nécessitera de modifier le script.
- Moins bien supporté que l'utilisation de la
id attribut
- Cela causera des problèmes si vous chargez le même script deux fois.
5. Boucle sur tous les scripts pour trouver celui que vous voulez.
Nous pouvons également boucler sur chaque élément script et les vérifier individuellement pour sélectionner celui que nous voulons :
<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>
Cela nous permet d'utiliser les deux techniques précédentes dans les navigateurs plus anciens qui ne prennent pas en charge la fonction querySelector() bien avec les attributs. Par exemple :
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Elle hérite des avantages et des problèmes de l'approche adoptée, quelle qu'elle soit, mais ne s'appuie pas sur querySelector() donc fonctionnera dans les anciens navigateurs.
6. Obtenir le dernier script exécuté.
Comme les scripts sont exécutés séquentiellement, le dernier élément scripts sera très souvent le scripts en cours d'exécution :
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Avantages
- Simple.
- Un soutien quasi universel
- Aucun attribut ou identifiant personnalisé n'est nécessaire
Problèmes
- Fait no travailler avec des scripts asynchrones (
defer & async )
- Fait no travailler avec des scripts insérés dynamiquement
