本文介绍了动态加载JavaScript文件的三种常用方法。第一种利用document.write重写文档流,但会导致页面重绘;第二种通过jQuery的getScript方法实现;第三种基于原生JavaScript动态创建script标签并设置src属性,同时兼容不同浏览器的加载状态监听。
本文整理了几种动态加载JavaScript文件的常见方案,并将持续更新补充。
使用document.write方式
一、使用document.write/writeln()方式
该方法通过重写文档流来实现JS文件的动态加载,其副作用是导致整个页面发生重绘。
具体实现如下:
代码示例:
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
使用时需注意特殊字符的正确转义。
使用jQuery加载
二、使用jQuery
利用jQuery提供的getScript(url, callback)方法来完成JS文件的动态加载。
$.getScript('test.js',function(){
alert('done');
});
原生JavaScript实现
三、使用原生JavaScript方法
核心原理是动态创建一个script标签,并为其指定src属性以指向目标脚本。
function loadJs(url,callback){
var script=document.createElement('script');
script.type="text/javascript";
if(typeof(callback)!="undefined"){
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange=null;
callback();
}
}
}else{
script.onload=function(){
callback();
}
}
}
script.src=url;
document.body.appendChild(script);
}
loadJs("test.js",function(){
alert('done');
});
基于相同原理,也可动态加载CSS文件,区别在于将脚本插入到head标签而非body中。
以上即为动态加载JavaScript文件的几种主要方法,希望能对您的学习有所帮助。