建立dynamic.js文件,表示动态加载的js文件,里面的内容为:
function dynamicJS() {
alert("加载完毕");
}
如下方法中的html页面和dynamic.js文件在一个目录下。
一. document.write()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
<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属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
<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元素
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
<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元素,但同样存在异步加载问题。
前三种方法共同点:异步执行,加载这些脚本的同时,主页面的脚本继续运行。若此时调用未加载完成的JS中的代码,会报错。
四. XMLHttpRequest/ActiveXObject 同步加载
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic load JS</title>
<script>
function init() {
ajaxPage('abc', 'dynamic.js');
dynamicJS();
}
function ajaxPage(sId, url) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject();
xhr.open('GET', url, false); //同步加载
xhr.send(null);
// xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
//0代表访问本地资源,200代表访问服务器成功,304代表没做修改,访问缓存
if(xhr.status == 200 || xhr.status == 0 || xhr.status == 304 ) {
includeJS(sId, xhr.responseText);
}
}
// }
}
function includeJS(sId, source) {
if(source != null && (!document.getElementById(sId))) {
var myHead = document.getElementsByTagName('head')[0];
var myScript = document.createElement('script');
myScript.id = sId;
try {
myScript.appendChild(document.createTextNode(source));
} catch(ex) {
myScript.text = source;
}
myHead.appendChild(myScript);
}
}
</script>
</head>
<body>
<input type="button" onclick="init();" value="测试按钮" />
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic load JS</title>
<script>
function init() {
ajaxPage('abc', 'dynamic.js');
dynamicJS();
}
function ajaxPage(sId, url) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject();
xhr.open('GET', url, false); //同步加载
xhr.send(null);
// xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
//0代表访问本地资源,200代表访问服务器成功,304代表没做修改,访问缓存
if(xhr.status == 200 || xhr.status == 0 || xhr.status == 304 ) {
includeJS(sId, xhr.responseText);
}
}
// }
}
function includeJS(sId, source) {
if(source != null && (!document.getElementById(sId))) {
var myHead = document.getElementsByTagName('head')[0];
var myScript = document.createElement('script');
myScript.id = sId;
try {
myScript.appendChild(document.createTextNode(source));
} catch(ex) {
myScript.text = source;
}
myHead.appendChild(myScript);
}
}
</script>
</head>
<body>
<input type="button" onclick="init();" value="测试按钮" />
</body>
</html>
参考链接:http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html