一. document.write()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic load JS</title>
<script>
function init() {
document.write(‘<script src="dynamic.js"><\/script>‘);
document.write(‘<input type="button" onclick="load();" value="加载完毕" \/>‘);
}
dynamicJS(); //此处报错，由于dynamic.js文件还未加载完毕
function load() {
dynamicJS();
}
</script>
</head>
<body>
<input type="button" onclick="init();" value="初始化加载" />
<!--<input type="button" onclick="load();" value="加载完毕">-->
</body>
</html>
问题,1，document.write会重写页面，在点击初始化加载按钮后，页面重绘导致原有的内容丢失，上述代码中注释掉的”加载完毕“按钮会丢失，因此需要在init函数中使用document.write的方式建立一个按钮。
问题2，异步加载，直接调用dynamicJS方法会报错，因为js文件未加载完毕，而在其后的代码已经开始运行。
综上，此种方法不推荐。
二. 动态改变已有script的src属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic load JS</title>
<script id="abc" src=""></script>
<script>
function init() {
abc.src = "dynamic.js";
dynamicJS(); //此处调用报错，由于还未加载完毕
}
function load() {
dynamicJS();
}
</script>
</head>
<body>
<input type="button" onclick="init();" value="初始化加载" />
<input type="button" onclick="load();" value="加载完毕">
</body>
</html>
这个代码运行起来有问题，点击”加载完毕“按钮还是报"Uncaught ReferenceError: dynamicJS is not defined"
问题：异步加载问题
三.动态创建script元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic load JS</title>
<script>
function init() {
var myScript = document.createElement(‘script‘);
myScript.src = ‘dynamic.js‘;
document.body.appendChild(myScript);
dynamicJS(); //此处调用报错，由于还未加载完毕
}
function load() {
dynamicJS();
}
</script>
</head>
<body>
<input type="button" onclick="init();" value="初始化加载" />
<input type="button" onclick="load();" value="加载完毕">
</body>
</html>
问题：相对于第二种方式，不需要在页面上一开始就添加script元素，但同样存在异步加载问题。