首页 > 开发 > JS > 正文

动态加载JavaScript文件的3种方式

2024-05-06 16:44:04
字体:
来源:转载
供稿:网友

以下是遇到的几种动态加载JavaScript文件的方式,持续更新中。。。

一、使用document.write/writeln()方式

该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。

实现方式:

 

复制代码 代码如下:
document.writeln("<script src=/"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js/"></script>");

 

需要注意的是特殊字符的转义。

二、使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){ alert('done');});

三、使用原生js方法

原理:动态创建script标签,并指定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标签。

以上就是动态加载JavaScript文件的方法,希望对大家的学习有所帮助。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表