美文网首页
在html中动态生成script标签

在html中动态生成script标签

作者: 韩小强 | 来源:发表于2018-07-02 15:40 被阅读0次

    文档对象模型(DOM)允许你使用JavaScript 动态创建HTML的几乎全部文档内容。其根本在于,<script>元素与页面其他元素没有什么不同:引用变量可以通过DOM进行检索,可以从文档中移动、删除,也可以被创建.
    ----( 摘自高性能Javascript )

    一、单个script添加

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "file1.js";
    document.getElementsByTagName_r("head")[0].appendChild(script);
    //这种方法仅适用于单个的script标签
    

    二,多个script添加(动态添加)

     //定义添加方法,
    // urls----script.src地址数组、callback---回调函数
     function loadScripts(urls, callback) {
           callback = callback || function () { };
          //添加script属性,并添加到head中
           var loader = function (src, handler) {
               var script = document.createElement('script');
               script.type = 'text/javascript';
               script.src = src;
              //重点!!!!script加载成功
               script.onload = function () {
                   script.onload = null;
                   script.onerror = null;
                   handler();
               };
               script.onerror = function () {
                   script.onload = null;
                   script.onerror = null;
                   callback({
                       message: src + '依赖未加载成功!'
                   });
               };
               var head = document.getElementsByTagName('head')[0];
               (head || document.body).appendChild(script);
           };
           //自执行函数,用于循环loader
           (function run() {
               if (urls.length > 0) {
                   loader(urls.shift(), run);
               } else {
                   callback();
               }
           })();
           console.log(document.head)
       }
       var relies = ['file:///C:/c.js', 'file:///C:/b.js']
       
       loadScripts(relies, function cb(err) {
           if (err) {
               return console.log(err.message);
           }
       })
    

    相关文章

      网友评论

          本文标题:在html中动态生成script标签

          本文链接:https://www.haomeiwen.com/subject/gbrluftx.html