虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > 动态加载JavaScript文件的3种方式

动态加载JavaScript文件的3种方式
类别:JavaScript   作者:码皇   来源:互联网   点击:

第一种是使用document write writeln()方式,第二种使用jQuery,第三种是使用原生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文件的方法,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • 动态加载JS文件的三种方法
  • 使用jQuery动态加载js脚本文件的方法
  • jquery及js实现动态加载js文件的方法
  • jquery getScript动态加载JS方法改进详解
  • AngularJs根据访问的页面动态加载Controller的解决方案
  • JS 动态加载脚本的4种方法
  • 用ajax动态加载需要的js文件
  • javascript如何动态加载表格与动态添加表格行
  • js 动态加载事件的几种方法总结
  • 一个简单的动态加载js和css的jquery代码
相关热词搜索: 动态加载JavaScript文件 JavaScript动态加