Maison > Article > interface Web > Explication détaillée de la création dynamique synchrone et asynchrone d'instances d'éléments de script en javascript

Explication détaillée de la création dynamique synchrone et asynchrone d'instances d'éléments de script en javascript

伊谢尔伦original: 2017-07-21 15:21:042600parcourir

Création dynamique d'éléments de script (asynchrone)

Créez un function3.html sous le même dossier, le code est le suivant :

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

Les avantages de cette méthode sont différents de le second Autrement dit, il n'est pas nécessaire d'écrire une balise de script dans l'interface au début. L'inconvénient est toujours le chargement asynchrone, qui pose le même problème.

Ces trois méthodes sont toutes exécutées de manière asynchrone, donc lors du chargement de ces scripts, les scripts de la page principale continuent de s'exécuter si les méthodes ci-dessus sont utilisées, le code suivant n'aura pas l'effet escompté.

Mais vous pouvez ajouter une alerte devant functionOne pour bloquer l'exécution du script de la page principale, puis vous constatez que functionOne peut s'exécuter, ou que votre code ultérieur doit être exécuté sous un autre bouton, étape par étape , ou définir un timer pour exécuter le code suivant après un temps fixe, mais il est certainement impossible d'utiliser ces méthodes dans le projet.

En fait, la troisième méthode devient un chargement synchrone avec quelques modifications.

Créer dynamiquement des éléments de script (de manière synchrone)

Créer un function4.html sous le même dossier, le code est le suivant :

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

Cette méthode ne charge pas les externes js, mais ajout de sous-clés à myScript. Dans Firefox, Safari, Chrome, Opera et IE9, ce code fonctionne correctement. Mais cela provoquera des erreurs dans les versions IE8 et inférieures. IE traite 3f1c4e4b6b16bbbd69b2ee476dc4f83a comme un élément spécial et n'autorise pas l'accès DOM à ses nœuds enfants. Cependant, vous pouvez utiliser l'attribut text de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour formuler du code js, comme dans l'exemple suivant :

var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();

Le code ainsi modifié peut être utilisé dans IE, Firefox, Opera et Safari3 et les versions ultérieures s'exécutent. Bien que les versions Safari antérieures à 3.0 ne prenaient pas correctement en charge l'attribut texte, elles permettaient l'utilisation de la technologie des nœuds de texte pour spécifier le code. Si vous devez être compatible avec les versions antérieures de Safari, vous pouvez utiliser le code suivant :

var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();

Ici, essayez d'abord la méthode standard du nœud de texte DOM, car tous les navigateurs sauf IE8 et versions antérieures prennent en charge cette méthode. Si cette ligne de code génère une erreur, cela signifie IE8 ou version antérieure, l'attribut text doit donc être utilisé. L'ensemble du processus peut être représenté par la fonction suivante :

function loadScriptString(code)
{
  var myScript= document.createElement("script");
  myScript.type = "text/javascript";
  try{
    myScript.appendChild(document.createTextNode(code));
  }
  catch (ex){
    myScript.text = code;
  }
  document.body.appendChild(myScript);
}

Vous pouvez ensuite utiliser cette méthode ailleurs pour charger le code que vous devez utiliser. En fait, exécuter le code de cette manière revient à passer la même chaîne à eval() dans la fonction globale.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la façon d'optimiser le code pour le chargement de fichiers javascriptArticle suivant：Explication détaillée de la façon d'optimiser le code pour le chargement de fichiers javascript

Articles Liés

Voir plus