动态加载JavaScript文件的两种实现方式

动态加载JavaScript的两种核心方法

本文主要介绍动态加载JavaScript文件的两种常用方法，供开发者参考。第一种方法是通过Ajax请求从服务器获取脚本文件内容，随后在前台使用eval()函数执行获取到的代码。第二种方法是动态创建一个script标签，设置其src属性，并将该标签插入到页面的head元素中，从而加载JS文件。这相当于在head中手动编写了一个<script src="..."></script>标签，只是这里的script标签是通过JavaScript动态生成的。

<script type="text/javascript" src="call.js"></script>

以下代码展示了如何通过JavaScript创建上述script标签，并将其添加到head元素中：

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script); 

当call.js加载完成后，我们需要调用其中定义的方法。然而，在将script标签插入head（即head.appendChild(script)）之后，不能立即调用其中的JS函数。因为浏览器对JS文件的加载是异步的，我们无法确切知道加载何时完成。我们可以通过监听事件来判断helper.js是否加载完毕（假设call.js中包含一个callback方法）。具体实现代码如下:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

这里设置了两个事件监听函数，因为在IE浏览器中使用onreadystatechange事件，而Gecko、WebKit内核的浏览器以及Opera浏览器都支持onload事件。事实上，仅判断this.readyState == 'complete'并不能在所有情况下正常工作。理论上，状态变化经历以下步骤：1. uninitialized；2. loading；3. loaded；4. interactive；5. complete。但在实际运行中，部分状态可能会被跳过。根据经验，在IE7中，通常只能获得loaded或complete中的一个状态，两者不会同时出现。原因可能是判断是否从缓存读取影响了状态变化，或其他未知因素。因此，建议将判断条件修改为this.readyState == 'loaded' || this.readyState == 'complete'。

参考jQuery的实现方式，最终的兼容代码实现如下：

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

还有一种较为简单的情况：如果将help()方法的调用写在helper.js文件的末尾，那么可以确保在helper.js加载完成后自动调用help()。当然，这种方式是否适合你的具体应用场景，还需根据实际情况判断。

另外需要注意以下几点：

动态加载的跨域与DOM操作注意事项

1. 由于script标签的src属性可以跨域访问资源，因此这种方法可以模拟Ajax，从而解决Ajax跨域访问的限制问题。2. 如果使用Ajax返回的HTML代码中包含script标签，直接通过innerHTML插入到DOM中，script代码通常不会执行。粗略查看jQuery().html(html)的源码发现，jQuery会先解析传入的参数，剥离其中的script代码，然后动态创建script标签进行加载。因此，使用jQuery的html方法向DOM添加包含script的HTML时，script是可以正常执行的。例如：

jQuery("#content").html("<script>alert('aa');<\/script>");

以上就是动态加载JavaScript文件的两种主要方法，希望对各位的学习有所帮助。