html动态加载js文件

一共有三种方法：

1.jquery方法：

源码：

var headTag = document.getElementsByTagName('head')[0];
var scriptAry=headTag.getElementsByTagName("script");
var f=true;
for(var i=0;i<scriptAry.length;i++){
var src="patch/"+type+".js";
if(src==scriptAry[i].src){
f=false;
break;
}
}
if(f){
//	get操作就是把文件内容原封不动的获取来，复制给一个变量再进行操作。
//这种方法是加载js，但是不导入。加载完就没了。
//也就是说：f永远为true。scriptAry永远也不会多起来。
$.getScript("patch/"+type+".js",function(){  //加载test.js,成功后，并执行回调函数
//		console.log("加载js文件");
eval('_'+type+'.addNewXml_to_xml_and_submit(json);');
});
}
else{
eval('_'+type+'.addNewXml_to_xml_and_submit(json);');
}

</pre><p></p><p>$.getScript()方法加载的js文件不会出现在web的source（浏览器加载的文件），它是用一次加载一次。也就是scriptAry数据永远不变。$.getScript（）中的第二个参数是函数，这个回调函数，当顺利加载时执行回调函数中的内容。</p><p></p><p></p><p>2.使用document.write方法</p><p>源码：</p><p></p><pre code_snippet_id="1893935" snippet_file_name="blog_20160922_3_3701765" name="code" class="javascript">document.write('<link rel="stylesheet" type="text/css" href="' + path + '/resources/css/ext-all' + suffix + '-debug.css"/>');
document.write('<script type="text/javascript" src="' + path + '/ext-all' + (rtl ? '-rtl' : '') + '.js"></script>');

通过这种方法加载的js，在加载完之后页面是能调用新加js里面的东西，但是页面会跳为全空白，document.write（）方法会在写入前清除原页面的所有内容，也就相当于覆盖的意思

至少我试过是这样的。

3.使用appendChild方法

源码：

var head = document.getElementsByTagName('HEAD').item(0);
//这种方法是导入js文件加载。
//或  var head = document.getElementsByTagName('HEAD')[0];
var script= document.createElement("script");
script.type = "text/javascript";
script.id = "javascript②"+type;
script.src="patch/"+type+".js";
head.appendChild(script);

用这种方法加载js文件，scriptAry数组是会变化的，但是，appendChild方法有一定的延迟，如果在这个之后直接调用新加的js中的内容时会报错的，报：未定义。