html动态加载js文件

「爱情、让人受尽委屈。」 2022-09-26 12:57 581阅读 0赞

一共有三种方法：

1.jquery方法：

源码：

</pre>$.getScript()方法加载的js文件不会出现在web的source（浏览器加载的文件），它是用一次加载一次。也就是scriptAry数据永远不变。$.getScript（）中的第二个参数是函数，这个回调函数，当顺利加载时执行回调函数中的内容。2.使用document.write方法源码：<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中的内容时会报错的，报：未定义。