Ausführliche Erläuterung, wie Sie mit Javascript ein Skript laden und Callback-Codebeispiele ausführen-js-Tutorial-php.cn

Wir können das -Element dynamisch erstellen und dann das Skript laden, indem wir sein src-Attribut ändern, aber woher wissen wir, dass die Skriptdatei geladen wird, da einige unserer Funktionen erst danach wirksam werden müssen das Skript geladen ist, um die Ausführung zu starten. Im IE-Browser können Sie onreadystatechange des -Elements verwenden, um die Änderung des Ladestatus zu überwachen und zu beurteilen, ob das Skript geladen ist, indem Sie beurteilen, ob sein readyState geladen oder abgeschlossen ist. Nicht-IE-Browser können mit onload direkt ermitteln, ob das Skript geladen ist.

Ein einfacher Implementierungsprozess sieht so aus:

//IE下： var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.onreadystatechange = function() { if(this.readyState == "loaded" || this.readyState == "complete"){ alert("加载成功啦！"); } } script.setAttribute("src",scripts[i]); //Opera、FF、Chrome等： var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.onload = function() { alert("加载成功啦！"); } script.setAttribute("src",scripts[i]); Nach dem Login kopieren Das Prinzip ist sehr einfach, basierend auf diesen beiden einfachen Prinzipien, die wir erstellen einige Änderungen, nämlich serielle Lade- und parallele Ladeskripte.

Wenn ein Array mit mehreren JS-Dateipfaden übergeben wird, beginnt die serielle Ladefunktion mit dem Laden der ersten Skriptdatei und beginnt nach jedem erfolgreichen Laden mit dem Laden der nächsten Skriptdatei, und dann werden alle geladen Führen Sie die Callback-Funktion aus. Beim parallelen Laden werden alle Skriptdateien von Anfang an geladen, d. h. sie beginnen am selben Punkt zu laden. Wenn der gesamte Ladevorgang abgeschlossen ist, wird die Rückruffunktion ausgeführt.

Nach dem Test sind diese beiden Funktionen mit allen aktuellen Mainstream-Browsern kompatibel.

/** * 串联加载指定的脚本 * 串联加载[异步]逐个加载，每个加载完成后加载下一个 * 全部加载完成后执行回调 * @param array|string 指定的脚本们 * @param function 成功后回调的函数 * @return array 所有生成的脚本元素对象数组 */ function seriesLoadScripts(scripts,callback) { if(typeof(scripts) != "object") var scripts = [scripts]; var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement; var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //递归 s[i] = document.createElement("script"); s[i].setAttribute("type","text/javascript"); s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") { this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback(); } } s[i].setAttribute("src",scripts[i]); HEAD.appendChild(s[i]); }; recursiveLoad(0); } /** * 并联加载指定的脚本 * 并联加载[同步]同时加载，不管上个是否加载完成，直接加载全部 * 全部加载完成后执行回调 * @param array|string 指定的脚本们 * @param function 成功后回调的函数 * @return array 所有生成的脚本元素对象数组 */ function parallelLoadScripts(scripts,callback) { if(typeof(scripts) != "object") var scripts = [scripts]; var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0; for(var i=0; i<scripts.length; i++) { s[i] = document.createElement("script"); s[i].setAttribute("type","text/javascript"); s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") { loaded++; this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); if(loaded == scripts.length && typeof(callback) == "function") callback(); } }; s[i].setAttribute("src",scripts[i]); HEAD.appendChild(s[i]); } } Nach dem Login kopieren Hier wird das -Tag dynamisch in das -Tag eingefügt und das Tag-Element wird automatisch entfernt. Wenn Sie vorsichtig sind, werden Sie auch feststellen, dass hier eine Methode namens bedingte Kompilierung als Ausdruck (!/*@cc_on!@*/0) verwendet wird, um festzustellen, ob es sich um einen Nicht-IE-Browser handelt nicht über bedingte Kompilierung Wenn Sie interessiert sind, können Sie online nach relevanten Informationen suchen, um mehr darüber zu erfahren.

So verwenden Sie diese beiden Funktionen: Hier deklarieren wir eine Array-Variable, die zwei Remote-JS-Dateiadressen enthält (natürlich unterstützt das -Tag-Aufrufskript domänenübergreifend):