用手動創建新的script標籤的方式，實現JavaScript腳本的異步加載
- 2020 年 3 月 18 日
- 筆記
代碼第四行里新建一個script標籤頁，在第8行的回調函數onreadystatechange里，根據屬性readyState判斷當前標籤頁的狀態，如果為loaded或者complete，說明腳本加載成功，此時觸髮腳本加載人員指定的回調函數。
該加載器的完整代碼實現如下：
<html> <script> function loadScript(url, callback){ var script = document.createElement ("script") ; script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } // end of readyState }; // end of onreadystatechange } // end of IE else { script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } loadScript("026_test.js", function(){ console.log("File is loaded!"); hello(); }); </script> </html>
新建一個測試腳本文件，命名為test.js:
function hello() { console.log("hello world"); }
使用下列代碼加載該腳本，加載成功後，回調函數打印出File is loaded的消息，同時被加載腳本test.js里的函數hello被調用，打印出hello world:
