jquery动态加载外部js文件代码研究

作者：袖梨 2022-11-14

$.getScript函数动态加载js

有时网页上的js过多就会让网页加载太慢，用户体验不好,我们可以使用jquery $.getScript函数动态加载我们需要的js文件

代码如下	复制代码
$("#load").click(function(){ $.getScript('helloworld.js', function() { $("#content").html('Javascript is loaded successful!'); }); });

当点击 id为load的元素时就会加载helloworld.js这个文件

代码如下

复制代码

Load Javascript dynamically with jQuery

js 加载外部js文件研

第1种：用传统的document.write()来加载，这里里须注意用“”转义字符；

代码如下	复制代码
document.write("");

第2种：动态的创建一个script标签，然后给script元素添加src属性指向需要加载的js文件，最后用appendChild()方法把script元素添加到head里。

代码如下	复制代码
var oHead = document.getElementsByTagName("head")[0];

代码如下	复制代码
var oScript = document.createElement("script"); oScript.src = "test.js";

代码如下	复制代码
oHead.appendChild(oScript);

这两种方式都可以顺利的加载外部JS文件，但都有一个缺点，即在JS文件加载完毕之前都无法获取外部JS文件里定义的变量或函数，