本文实例讲述了js实现动态加载脚本的方法。分享给你们供你们参考，具体以下：javascript
最近公司的前端地图产品须要作一下模块划分，但愿用户用到哪一块的功能再加载哪一块的模块，这样能够提升用户体验。html
因此处处查资料研究js动态脚本的加载，不过真让人伤心啊！，网上几乎都是同一篇文章，4种方法，讨厌其中拷贝别人成果的人，也不加个原文的连接。哎！关键是最后一种方法还有点错误。通过两天的研究查阅资料，在这里和你们分享一下。前端
首先咱们须要一个被加载的js文件，我在一个固定文件夹下建立了一个package.js，打开后在里面写一个方法functionOne，很简单，代码以下：java
|
1
2
3
|
function
functionOne(){
alert(
"成功加载"
);
}
|
后面的html文件都建立在同一个目录下。node
方法一：直接document.writeajax
在同一个文件夹下面建立一个function1.html，代码以下：浏览器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<html>
<head>
<title></title>
<script type=
"text/javascript"
>
function
init()
{
//加载js脚本
document.write(
"<script src='package.js'><\/script>"
);
//加载一个按钮
document.write(
"<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>"
);
//若是立刻使用会找不到，由于尚未加载进来，此处会报错
functionOne();
}
function
operation()
{
//能够运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type=
"button"
value=
"初始化加载"
onclick=
"init()"
/>
</body>
</html>
|
经过document.write的方式能够往页面写入脚本，如代码所示，点击按钮“初始化加载”后能够加载package.js文件，可是当即运行里面的方法functionOne会找不到此方法，报告错误，而点击第二个按钮（经过document.write动态建立的“测试运行效果”）发现能够执行，此时脚本已经加载完毕了。因为这种方式是异步加载（一边继续执行后面的代码，一边额外开一个线程执行须要加载的脚本），而且document.write会重写界面，明显不实用。缓存
方法二：动态改变已有script的src属性服务器
在同一个文件夹下面建立一个function2.html，代码以下：app
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<title></title>
<script type=
"text/javascript"
id=
"yy"
src=
""
></script>
<script type=
"text/javascript"
>
function
init()
{
yy.src =
"package.js"
;
//若是立刻使用会找不到，由于尚未加载进来，此处会报错
functionOne();
}
function
operation()
{
//能够运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type=
"button"
value=
"测试按钮"
onclick=
"init()"
/>
<input type=
"button"
value=
"测试运行效果"
onclick=
"operation()"
/>
</body>
</html>
|
此种方法的好处在于不会改变界面元素，不至于重写界面元素，可是一样是异步加载，会有一样的问题。
方法三：动态建立script元素（异步）
在同一个文件夹下面建立一个function3.html，代码以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<html>
<head>
<title></title>
<script type=
"text/javascript"
>
function
init()
{
var
myScript= document.createElement(
"script"
);
myScript.type =
"text/javascript"
;
myScript.src=
"package.js"
;
document.body.appendChild(myScript);
//若是立刻使用会找不到，由于尚未加载进来
functionOne();
}
function
operation()
{
//能够运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type=
"button"
value=
"测试按钮"
onclick=
"init()"
/>
<input type=
"button"
value=
"测试运行效果"
onclick=
"operation()"
/>
</body>
</html>
|
此办法的优点相对于第二种而言就是不须要最开始就在界面写一个script标签，缺点仍是异步加载，存在一样的问题。
这三种方法都是异步执行的，因此在加载这些脚本的同时，主页面的脚本继续运行，若是用以上的方法，那下面的代码将得不到预期的效果。
不过能够在functionOne前面加一个alert就能够堵塞一下主页面脚本的运行，而后你发现functionOne就能够运行了，或者你的后期代码须要在另外一个按钮下执行，一步一步的来，要不就定义一个计时器，在固定时间后再执行后面的代码，不过在项目里面确定不可能使用这些方法。
其实第三种方法改一点就变成同步加载了。
方法四：动态建立script元素（同步）
在同一个文件夹下面建立一个function4.html，代码以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title></title>
<script type=
"text/javascript"
>
function
init()
{
var
myScript= document.createElement(
"script"
);
myScript.type =
"text/javascript"
;
myScript.appendChild(document.createTextNode(
"function functionOne(){alert(\"成功运行\"); }"
));
document.body.appendChild(myScript);
//此处发现能够运行
functionOne();
}
</script>
</head>
<body>
<input type=
"button"
value=
"测试按钮"
onclick=
"init()"
/>
</body>
</html>
|
此方法并无加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码能够正常运行。可是在IE8以及如下的版本中会致使错误。IE将<script>视为一个特殊的元素，不容许DOM访问其子节点。不过能够用<script>元素的text属性来制定js代码，想下面的例子这样：
|
1
2
3
4
5
6
|
var
myScript= document.createElement(
"script"
);
myScript.type =
"text/javascript"
;
myScript.text =
"function functionOne(){alert(\"成功运行\"); }"
;
document.body.appendChild(myScript);
//此处能够运行
functionOne();
|
通过这样修改以后的代码能够在IE、Firefox、Opera和Safari3及以后版本中运行。Safari3.0以前的版本虽然不能正确地支持text属性，但却容许使用文本节点技术来指定代码。若是须要兼容早期版本的Safari，可使用下面代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
myScript= document.createElement(
"script"
);
myScript.type =
"text/javascript"
;
var
code =
"function functionOne(){alert(\"成功运行\"); }"
;
try
{
myScript.appendChild(document.createTextNode(code));
}
catch
(ex){
myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现能够运行
functionOne();
|
这里，首先尝试标准的DOM文本节点方法，由于除了IE8以及如下，全部浏览器都支持这种方式。若是这行代码抛出了错误，那么说明是IE8以及如下，因而就必须使用text属性了。整个过程能够用如下函数来表示：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function
loadScriptString(code)
{
var
myScript= document.createElement(
"script"
);
myScript.type =
"text/javascript"
;
try
{
myScript.appendChild(document.createTextNode(code));
}
catch
(ex){
myScript.text = code;
}
document.body.appendChild(myScript);
}
|
而后你能够在其余地方使用此方法来加载须要使用的代码。实际上，这样执行代码与在全局做用于中把相同字符串传递给eval()是同样的。可是咱们这里只能使用字符串形式的代码，也有局限性，用户通常但愿提供的方法形如loadScriptAddress("package.js")的方式，因此咱们还须要继续讨论。
方法五：XMLHttpRequest/ActiveXObject异步加载
在同一个文件夹下面建立一个function5.html，代码以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html>
<head>
<title></title>
<script type=
"text/javascript"
>
function
init()
{
//加载package.js文件，设置script的id为yy
ajaxPage(
"yy"
,
"package.js"
);
//此方法为package.js里面的方法，此处执行方法成功
functionOne();
}
function
ajaxPage(sId,url)
{
var
oXmlHttp = getHttpRequest();
oXmlHttp.onreadystatechange =
function
()
{
//4表明数据发送完毕
if
( oXmlHttp.readyState == 4 )
{
//0为访问的本地，200表明访问服务器成功，304表明没作修改访问的是缓存
if
(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
{
includeJS(sId,oXmlHttp.responseText);
}
else
{
}
}
}
oXmlHttp.open(
"GET"
,url,
true
);
oXmlHttp.send(
null
);
}
function
getHttpRequest()
{
if
(window.ActiveXObject)
//IE
{
return
new
ActiveXObject(
"MsXml2.XmlHttp"
);
}
else
if
(window.XMLHttpRequest)
//其余
{
return
new
XMLHttpRequest();
}
}
function
includeJS(sId,source)
{
if
((source !=
null
)&&(!document.getElementById(sId)))
{
var
myHead = document.getElementsByTagName(
"HEAD"
).item(0);
var
myScript = document.createElement(
"script"
);
myScript.language =
"javascript"
;
myScript.type =
"text/javascript"
;
myScript.id = sId;
try
{
myScript.appendChild(document.createTextNode(source));
}
catch
(ex){
myScript.text = source;
}
myHead.appendChild( myScript );
}
}
</script>
</head>
<body>
<input type=
"button"
value=
"测试按钮"
onclick=
"init()"
/>
</body>
</html>
|
ActiveXObject只有IE里面才有，其余浏览器大部分支持XMLHttpRequest，经过此办法咱们能够实现动态加载脚本了，不过是异步加载，也无法运行functionOne，第二次就能够运行了，可是惋惜的是在IE、Firefox、Safari下能够运行，在Opera、Chrome下会出错，Chrome下的错误以下：
不过只要发布以后在Chrome和Opera下就不会出现错误了。
其实这里把open里面设置为false就是同步加载了，同步加载不须要设置onreadystatechange事件。
方法六：XMLHttpRequest/ActiveXObject同步加载
在这里我把一些状况考虑在内，写成了一个方法，封装为loadJS.js，方便之后直接调用，代码以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
/**
* 同步加载js脚本
* @param id 须要设置的<script>标签的id
* @param url js文件的相对路径或绝对路径
* @return {Boolean} 返回是否加载成功，true表明成功，false表明失败
*/
function
loadJS(id,url){
var
xmlHttp =
null
;
if
(window.ActiveXObject)
//IE
{
try
{
//IE6以及之后版本中可使用
xmlHttp =
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
}
catch
(e) {
//IE5.5以及之后版本可使用
xmlHttp =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
}
else
if
(window.XMLHttpRequest)
//Firefox，Opera 8.0+，Safari，Chrome
{
xmlHttp =
new
XMLHttpRequest();
}
//采用同步加载
xmlHttp.open(
"GET"
,url,
false
);
//发送同步请求，若是浏览器为Chrome或Opera，必须发布后才能运行，否则会报错
xmlHttp.send(
null
);
//4表明数据发送完毕
if
( xmlHttp.readyState == 4 )
{
//0为访问的本地，200到300表明访问服务器成功，304表明没作修改访问的是缓存
if
((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
{
var
myHead = document.getElementsByTagName(
"HEAD"
).item(0);
var
myScript = document.createElement(
"script"
);
myScript.language =
"javascript"
;
myScript.type =
"text/javascript"
;
myScript.id = id;
try
{
//IE8以及如下不支持这种方式，须要经过text属性来设置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}
catch
(ex){
myScript.text = xmlHttp.responseText;
}
myHead.appendChild( myScript );
return
true
;
}
else
{
return
false
;
}
}
else
{
return
false
;
}
}
|
此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释仍是写的比较清楚的，之后须要加载某个js文件时，只须要一句话就好了，如loadJS("myJS","package.js")。方便实用。
若是想要实现不发布还非要兼容全部浏览器，至少我还没找出这样的同步加载的办法，咱们只能经过异步加载开出回调函数来实现。
方法七：回调函数方式
在同一个文件夹下面建立一个function7.html，代码以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<title></title>
<script type=
"text/javascript"
>
function
init()
{
//加载package.js文件，设置script的id为yy
loadJs(
"yy"
,
"package.js"
,callbackFunction);
}
function
callbackFunction()
{
functionOne();
}
function
loadJs(sid,jsurl,callback){
var
nodeHead = document.getElementsByTagName(
'head'
)[0];
var
nodeScript =
null
;
if
(document.getElementById(sid) ==
null
){
nodeScript = document.createElement(
'script'
);
nodeScript.setAttribute(
'type'
,
'text/javascript'
);
nodeScript.setAttribute(
'src'
, jsurl);
nodeScript.setAttribute(
'id'
,sid);
if
(callback !=
null
) {
nodeScript.onload = nodeScript.onreadystatechange =
function
(){
if
(nodeScript.ready) {
return
false
;
}
if
(!nodeScript.readyState || nodeScript.readyState ==
"loaded"
|| nodeScript.readyState ==
'complete'
) {
nodeScript.ready =
true
;
callback();
}
};
}
nodeHead.appendChild(nodeScript);
}
else
{
if
(callback !=
null
){
callback();
}
}
}
</script>
</head>
<body>
<input type=
"button"
value=
"测试按钮"
onclick=
"init()"
/>
</body>
</html>
|
这种方式全部浏览器都支持，可是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我仍是比较喜欢第六种方法的。若是是异步加载的话，方法还有好几种，不过个人出发点是但愿实现同步加载，这里就不对异步加载作总结了。