一、代码示例:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>动态加载JS文件</title> </head> <body> <button id="btn" onclick="loanScript('test.js'),callback">加载js文件</button> <script type="text/javascript"> function callback(){ console.log("script load complete"); loadSuccess(); } function loanScript(url,callbackFun){ var script = document.createElement("script"); script.type = "text/javascript"; //兼容IE浏览器 if(script.readyState){ script.onreadystatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callbackFun(); } } }else{//其他浏览器 script.onload = function(){ callbackFun(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } </script> </body> </html>
注意除了Firefox和Opera保证脚本文件按照代码顺序加载,其他浏览器不保证文件按照你指定的顺序加载,可通过串联操作保证文件的加载次序代码如下
window.onload=function(){ loadScript("file1.js",function(){ loadScript("file2.js",function(){ loadScript("file3.js",function(){ alert("all js document are loaded"); }); }); }); }
浙公网安备 33010602011771号