JS动态加载JS文件实例方法详解-百分百源码网

JS动态加载JS文件实例方法详解

发布时间：01/15 来源：浏览：关键词：

今天要在自己网站加载一个广告，但是全部站都是静态的页面只是以前留了一个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文件里加上一个标记，如：