转自：https://www.cnblogs.com/tracylin/p/5122175.html
另一篇可学习：https://blog.csdn.net/wnvalentin/article/details/79769393
其中2.3 节的通过动态脚本技术添加代码，说明如下：
先把代码贴上：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./test1.js"></script> </head> <body> <script type="text/javascript">
function callback(){ alert("我是callback") } function loadScript(url,callback){ var script = document.createElement("script"); script.type = "text/javascript"; //绑定加载完毕的事件 if(script.readyState){ script.onreadystatechange = function(){ if(script.readyState === "loaded" || script.readyState === "complete"){ callback&&callback(); } } }else{ script.onload = function(){ callback&&callback(); } } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
loadScript("./test.js", callback) //调用这个函数加载test.js代码并立即执行
</script> </body> </html>
test.js是同文件夹下的一个js文件，内容只有一条js代码：alert("我是test.js")
test1.js也是同文件夹下的js文件，内容也只有一条js代码：alert("我是test1.js")
在浏览器中打开上面的HTML文件，执行的结果为：
1、弹出“我是test1.js”
2、弹出“我是test.js”
3、弹出“我是callback”
可以看出，代码从上而下执行，首先执行到<script type="text/javascript" src="./test1.js"></script>，则把test1.js下载下来并执行（同步执行），然后是执行body中的script标签中的代码，在这个执行过程中调用loadScript，此时会把把test.js下载下来，然后添加到一个script标签到head中，紧接着执行test.js中的代码，再是执行callback函数
所以看出在哪里调用loadScript，就在哪里下载并执行外部引入的js文件