JS动态加载JS文件实例方法详解
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 今天要在自己网站加载一个广告，但是全部站都是静态的页面只是以前留了一个div在这里我希望通过js动态加载js文件然后给div了，下面小编来给各位同学分享一些办法。...
|
1、直接document.write
| 代码如下 |
复制代码 |
|
<script language="javascript">
document.write("<script src='test.js'></script>");
</script>
|
2、动态改变已有script的src属性
| 代码如下 |
复制代码 |
|
<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>
|
3、动态创建script元素
| 代码如下 |
复制代码 |
|
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="test.js";
oHead.appendChild( oScript);
</script>
|
上面三种方法都可以适合我的要求了,但个人觉得还不适用，于是找找jquery/45691.htm">jquery动态加载js文件，这不有一段非常不错的代码
| 代码如下 |
复制代码 |
|
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
|
上面代码就完全可以满足我的要求了，下面再附一代码加载js与css代码
动态加载Js、Css文件代码：
| 代码如下 |
复制代码 |
//动态加载文件代码
$.extend({
includePath: ”,
include: function (file) {
var files = typeof file == “string” ? [file] : file;
for (var i = 0; i < files.length; i++) {
var name = files[i].replace(/^s|s$/g, “”);
var att = name.split(‘.’);
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == “css”;
var tag = isCSS ? “link” : “script”;
var attr = isCSS ? ” type=’text/css’ rel=’stylesheet’ ” : ” language=’javascript’ type=’text/javascript’ “;
var link = (isCSS ? “href” : “src”) + “=’” + $.includePath + name + “‘”;
if ($(tag + “[" + link + "]“).length == 0) document.write(“”);
}
}
});
//使用方法
$.includePath = ‘Scripts/WorkSpace/’;
$.include(['GetVehicleGroup.js']);
|
注：代码系转载。不过已经使用过，很好使
2.立即使用Js文件中的方法
因为是动态加载的。考虑到网络原因。立即使用JS文件中的方法会报错。不过可以使用下边代码
| 代码如下 |
复制代码 |
|
function _GetVehicleGroup() {
if (“undefined” == typeof (GetVehicleGroupIsOk)) {
setTimeout(“_GetVehicleGroup()”, 200);
return;
}
//动态加载JS文件中的方法
GetVehicleGroup();
}
|
注：要在要加载的JS文件里加上一个标记，如：
| 代码如下 |
复制代码 |
|
var GetVehicleGroupIsOk = “enable”;
|
|
