Comment trouver l'élément de script qui a chargé le JavaScript en cours d'exécution ?

Comment référencer l'élément de script qui a chargé le script en cours d'exécution

Comprendre le problème

Dans certains scénarios, les développeurs peuvent avoir besoin de charger dynamiquement des éléments supplémentaires scripts dans le document. Cependant, la méthode conventionnelle d'utilisation de document.getElementsByTagName('head')[0].appendChild(v) peut ne pas convenir si l'élément HEAD n'a pas encore été entièrement rendu.

Solution : référencer le script actuel

Pour référencer l'élément de script qui a chargé le script en cours d'exécution, plusieurs techniques peuvent être utilisées :

1. document.currentScript

Avantages :

• Simple, explicite et fiable
• Ne nécessite pas de modification de la balise de script
• Fonctionne avec des scripts asynchrones (différés et asynchrones)
• Fonctionne avec des scripts insérés dynamiquement

Limitations :

• Non pris en charge dans les anciens navigateurs ou IE
• Ne fonctionne pas avec les modules (

<br><script><br>var me = document.currentScript;<br></script><br>&lt ;/pre><h4 id="ID-de-balise-de-script">2. ID de balise de script</h4><p><strong>Avantages :</strong></p>

• Simple, explicite et fiable
• Largement pris en charge
• Fonctionne avec des scripts asynchrones (différé et asynchrone)
• Fonctionne avec des scripts insérés dynamiquement

Limitations :

• Nécessite l'ajout d'un attribut id à la balise de script

<br><script>var moi = document.getElementById('myscript');<br></script><br>

3. Sélection des attributs de données

Avantages :

• Simple et explicite
• Fonctionne avec des scripts asynchrones (différés et asynchrones)
• Fonctionne avec des scripts insérés dynamiquement

Limitations :

• Nécessite l'ajout d'un attribut data-* personnalisé à la balise de script
• Moins largement pris en charge que l'utilisation ID
• Peut prêter à confusion avec d'autres éléments partageant les mêmes données attribut

<br><script data-name="myscript"><br>var me = document.querySelector('script[data-name="myscript"]');<br></script><br>

4. Sélection de source

Avantages :

• Fiable
• Fonctionne avec des scripts asynchrones (différés et asynchrones)
• Fonctionne avec des scripts inséré dynamiquement
• Aucun attribut ni identifiant personnalisé requis

Limitations :

• Ne fonctionne pas pour les scripts locaux
• Provoque des problèmes dans différents environnements (par exemple, dev vs. prod)
• Statique et fragile (les modifications apportées à l'emplacement du script nécessitent une modification)
• Moins largement pris en charge que l'utilisation de l'ID
• Des problèmes surviennent si le même script est chargé plusieurs fois fois

<br><script src="//example.com/embed.js"></script><br>

<br><script><br>var moi = document.querySelector('script[src="//example.com/embed.js"]');<br></script><br>

5. Itération de script

Avantages :

• Hérite des avantages des techniques précédentes
• Ne repose pas sur querySelector(), il fonctionne donc dans les versions plus anciennes navigateurs

Limitations :

• Plus complexe et coûteux en calcul

<br><br>var me = null;<br>var scripts = document.getElementsByTagName("script")<br>for (var i = 0; i  if (isMe(scripts[i])) {<pre class="brush:php;toolbar:false">me = scripts[i];

}
}

6. Dernier script exécuté

Avantages :

• Simple
• Presque universellement pris en charge
• Aucun attribut ou identifiant personnalisé requis

Limitations :

• Ne fonctionne pas avec les scripts asynchrones (différés et asynchrones)
• Ne fonctionne pas avec les scripts insérés dynamiquement

<br><script><br>var scripts = document.getElementsByTagName( 'script' );<br>var me = scripts[ scripts.length - 1 ];<br></script><br>

Conclusion

Le choix de la méthode pour référencer l'élément de script actuel dépend des exigences spécifiques de l'application et prise en charge de divers navigateurs. Pour les navigateurs modernes, document.currentScript est l'approche préférée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!