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

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”;

时间: 2024-08-03 05:16:25

JS动态加载JS文件实例方法详解的相关文章

JS 动态加载js文件和css文件 同步/异步的两种简单方式_javascript技巧

/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

jquery与js动态加载js文件的例子

如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 1,jquery方法 $.getScript("./test.js");   //加载js文件    $.getScript("./test.js",function(){   //加载test.js,成功后,并执行回调函数      console.log("加载js文件");  }); 

js动态加载jquery文件同时执行jquery函数的例子

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

js异步加载Javascript代码示例详解

当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:  代码如下 复制代码 function getScript(url, success) {     var script = document.createElement('script');     script.src = url;     var head = document.getElementsByTagName('head')[0],     do

js异步动态加载js与css文件代码

 jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 function loadjs(file){  var head = $('head').remove('#loadscript');  $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:

使用jquery动态加载Js文件和Css文件_jquery

如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助.Jquery动态加载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].re

LABJS按需动态加载js文件

  为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间;于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候,在去请求这些文件,这样就节省了页面的加载时间 LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的

动态加载js、css等文件跨iframe实现

 这篇文章主要介绍了动态加载js.css等文件跨iframe实现的方法,需要的朋友可以参考下 1.动态加载js,css文件(用原生js和jquery)    iframe结构:  frame0(父)  frame2(子)  frame3(子)    frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素?    *同级之间可以调用,可以 通过 子-父-子 的方式调用同级  parent.parentFram("这个方法在调用其他子farme");    1.

jquery实现动态加载js文件的例子

一.jQuery getScript()方法加载javascript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {/* 做一些加载完成后需要执行的事情 */}); 这个getScript方法返回一个jqxhr,你可以像下面这样用它: j