Explication détaillée de la création dynamique synchrone et asynchrone d'instances d'éléments de script en javascript-js tutoriel-php.cn

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>

Copier après la connexion

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>

Copier après la connexion

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

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal