>

javascript动态加载,掌握Javascript文件动态加载

- 编辑:正版管家婆马报彩图 -

javascript动态加载,掌握Javascript文件动态加载

Javascript文件动态加载一贯是相比麻烦的一件专业,像网络上传的相比布满的做法:

明白Javascript文件动态加载,javascript动态加载

Javascript文件动态加载一向是比较麻烦的一件业务,像互连网上传的相比广泛的做法:

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

然后大家来测量试验一下结出:

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")

    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

代码加载完后,会出现下图的错误:

图片 1

jquery明明是加载在第二个管理,为啥依然报jQuery不设有的对象呢?

因为这么加载,相当于展开了四个线程,只是jquery这一个文件先运营线程,而jquery推行完这么些线程的光阴,抢先了背后四个时间. 因而后边施行完的,恐怕未能找到jquery那几个指标。

然这种艺术怎么管理啊?

骨子里文件的加载是有个情景管理的.文件的加载有个onload事件,正是足以监听文件是还是不是加载成功的事件.

据此大家得以设想那一个主意来拍卖我们想要的结果.大家用直观的艺术来管理.创新后的代码如下:

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>

    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });


    </script>
  </body>
</html>

OK,推行完这一个代码之后,加载文件都以在前二个加载成功后,才会加载别的一个,那样就不会变成找不到用到的目的了.

接下来我们来试行贰个弹出框的效劳,代码里面使用了 Bootbox.js 插件. 加载代码如下:

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

刷新页面,就能够平昔呈现弹出框:

图片 2

动态加载的代码,往往轻巧在此地花费比很多时日调节和测量检验.我们最佳的章程就是写贰个最简便易行的事例,精通在那之中的原因. 这里的代码都得以扩充打包,还足以投入CSS文件的加载.作为和煦的插件使用。

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

您可能感兴趣的文章:

  • 用ajax动态加载须要的js文件
  • JS 动态加载脚本的4种方法
  • Extjs入门之动态加载树代码
  • IE6,IE7下js动态加载图片不展现错误
  • jquery getScript动态加载JS方法创新详解
  • 动态加载JS文件的三种办法
  • 选择jQuery动态加载js脚本文件的措施
  • jquery动态加载js/css文件措施(自写小函数)
  • JS获取浏览器语言动态加载JS文件示例代码
  • AngularJs依照访谈的页面动态加载Controller的缓和方案

Javascript文件动态加载从来是比较麻烦的一件工作,像互连网上传的相比较广泛的做法: function loadj...

接下来我们来测验一下结实:

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")

    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

代码加载完后,会冒出下图的不当:

图片 3

jquery明明是加载在首先个管理,为啥照旧报jQuery不设有的指标呢?

因为那样加载,相当于张开了四个线程,只是jquery那个文件先运转线程,而jquery实施完那个线程的时日,超越了前边八个时间. 因而前面执行完的,恐怕未能找到jquery那些目的。

然这种艺术怎么管理吧?

实际文件的加载是有个状态管理的.文件的加载有个onload事件,正是足以监听文件是还是不是加载成功的事件.

故而我们得以思索这一个法子来拍卖我们想要的结果.我们用直观的章程来管理.创新后的代码如下:

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>

    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });


    </script>
  </body>
</html>

OK,实践完那一个代码之后,加载文件都以在前二个加载成功后,才会加载另外三个,那样就不会招致找不到用到的靶子了.

然后大家来试行二个弹出框的意义,代码里面使用了 Bootbox.js 插件. 加载代码如下:

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

刷新页面,就能够一向呈现弹出框:

图片 4

动态加载的代码,往往轻易在此间花费比较多年华调节和测量检验.大家最佳的主意就是写贰个最简单易行的例证,明白当中的原因. 这里的代码都能够开展打包,还足以加入CSS文件的加载.作为团结的插件使用。

您恐怕感兴趣的稿子:

  • 学学javascript文件加载优化
  • JS 动态加载js文件和css文件 同步/异步的二种简易方法
  • JS加载器如何动态加载外界js文件
  • 动态加载js、css的简要完成代码
  • 动态加载js、css的实例代码
  • 动态加载js文件轻易示例
  • jquery及js实现动态加载js文件的法门
  • 如何动态加载外界Javascript文件
  • js达成动态加载脚本的格局实例汇总
  • 不应用script导入js文件的二种艺术
  • 动态加载JavaScript文件的3种方法

本文由关于计算机发布,转载请注明来源:javascript动态加载,掌握Javascript文件动态加载