Detaillierte Erläuterung der synchronen und asynchronen dynamischen Erstellung von Skriptelementinstanzen in Javascript-js-Tutorial-php.cn

Dynamische Erstellung von Skriptelementen (asynchron)

Erstellen Sie eine function3.html im selben Ordner. Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Die Vorteile dieser Methode sind unterschiedlich der zweite Mit anderen Worten, es ist nicht erforderlich, zu Beginn ein Skript-Tag in die Schnittstelle zu schreiben. Der Nachteil ist immer noch das asynchrone Laden, das das gleiche Problem aufweist.

Diese drei Methoden werden alle asynchron ausgeführt, sodass die Skripte auf der Hauptseite beim Laden dieser Skripte weiterhin ausgeführt werden. Wenn die oben genannten Methoden verwendet werden, hat der folgende Code nicht die erwartete Wirkung.

Aber Sie können vor functionOne eine Warnung hinzufügen, um die Ausführung des Hauptseitenskripts zu blockieren, und dann stellen Sie fest, dass functionOne ausgeführt werden kann, oder Ihr späterer Code muss Schritt für Schritt unter einer anderen Schaltfläche ausgeführt werden , oder definieren Sie einen Timer, um den folgenden Code nach einer festgelegten Zeit auszuführen, aber es ist sicherlich unmöglich, diese Methoden im Projekt zu verwenden.

Tatsächlich wird die dritte Methode mit ein paar Änderungen zum synchronen Laden.

Skriptelemente dynamisch erstellen (synchron)

Erstellen Sie eine function4.html im selben Ordner. Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Diese Methode lädt nicht extern js-Datei, fügte aber Unterschlüssel zu myScript hinzu. In Firefox, Safari, Chrome, Opera und IE9 funktioniert dieser Code einwandfrei. Es führt jedoch zu Fehlern in IE8 und niedrigeren Versionen. IE behandelt

Neueste Artikel des Autors