欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-21 08:32:36
以下是遇到的几种动态加载javascript文件的方式,持续更新中。。。 一、使用document.write/writeln()方式 该种方式可以实现js文件的动态加...

以下是遇到的几种动态加载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文件的方法,希望对大家的学习有所帮助。