Pourquoi le JavaScript en ligne ne fonctionne-t-il pas dans les balises de script avec des sources externes ?

Chargement de scripts avec des balises de script HTML

La balise de script HTML est utilisée pour inclure et exécuter du code JavaScript. Par défaut, cette balise prend un attribut source externe, tel que scr pour charger un fichier JavaScript. Cependant, les tentatives d'inclusion de JavaScript en ligne dans la balise de script, comme ceci :

<script src="myFile.js">
    alert( "This is a test" );
</script>

Échec silencieusement sans générer d'erreurs.

Pourquoi l'utilisation de JavaScript en ligne dans la balise de script ne fonctionne pas

La raison de ce comportement est qu'un élément de script ne peut charger qu'une seule source, qu'elle soit externe ou en ligne. Lorsque le contenu src et le contenu en ligne sont présents, le contenu en ligne est ignoré. Par conséquent :

<script src="script/addScript.js">
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>

Ne chargera pas les scripts spécifiés.

Solution : Utilisation de plusieurs éléments de script

Pour charger plusieurs scripts, vous devez utiliser des éléments de script distincts pour chacun :

<script src="script/obj.js"></script>
<script src="script/home/login.js"></script>

Vous pouvez également créer un script parent qui charge dynamiquement les scripts nécessaires :

<script>
var scripts = ["script/obj.js", "script/home/login.js"];
for (var i = 0; i < scripts.length; i++) {
  var script = document.createElement("script");
  script.src = scripts[i];
  document.head.appendChild(script);
}
</script>

Notes supplémentaires

Alors que le JavaScript en ligne est ignoré dans les éléments de script avec des sources externes, le contenu de l'élément de script reste dans le DOM. Cela a incité certains développeurs à l'utiliser pour stocker les données auxquelles accèdent les scripts externes. Cependant, l'utilisation des attributs data-* est généralement une approche plus appropriée et plus propre à cette fin.

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!