Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der synchronen und asynchronen dynamischen Erstellung von Skriptelementinstanzen in Javascript
Detaillierte Erläuterung der synchronen und asynchronen dynamischen Erstellung von Skriptelementinstanzen in Javascript
- 伊谢尔伦Original
- 2017-07-21 15:21:042563Durchsuche
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>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>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 3f1c4e4b6b16bbbd69b2ee476dc4f83a als spezielles Element und erlaubt keinen DOM-Zugriff auf seine untergeordneten Knoten. Sie können jedoch das Textattribut des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Elements verwenden, um js-Code zu formulieren, wie im folgenden Beispiel:
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();Der auf diese Weise geänderte Code kann in IE, Firefox, Opera verwendet werden und Safari3 und spätere Versionen laufen. Obwohl Safari-Versionen vor 3.0 das Textattribut nicht korrekt unterstützten, ermöglichten sie die Verwendung der Textknotentechnologie zur Angabe von Code. Wenn Sie mit früheren Versionen von Safari kompatibel sein müssen, können Sie den folgenden Code verwenden:
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();Versuchen Sie hier zunächst die Standard-DOM-Textknotenmethode, da alle Browser außer IE8 und niedriger diese Methode unterstützen. Wenn diese Codezeile einen Fehler auslöst, handelt es sich um IE8 oder niedriger, daher muss das Textattribut verwendet werden. Der gesamte Prozess kann durch die folgende Funktion dargestellt werden:
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);
}Dann können Sie diese Methode an anderer Stelle verwenden, um den Code zu laden, den Sie verwenden müssen. Tatsächlich ist die Ausführung des Codes auf diese Weise dasselbe wie die Übergabe derselben Zeichenfolge an eval() in der globalen Funktion.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der synchronen und asynchronen dynamischen Erstellung von Skriptelementinstanzen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!