美文网首页
在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标签

    文档对象模型(DOM)允许你使用JavaScript 动态创建HTML的几乎全部文档内容。其根本在于, 元素与页面...

  • 前端面试知识点(7)——前端进阶2

    1、手写jsonp的实现 基础:script标签可以跨域获取脚本 进阶:动态生成script标签,并拼接url填...

  • loading data dynamically and as

    .py .html .js 异步加载数据,动态追加元素到页面,动态生成html标签中的内容。好处:It just ...

  • JS笔记-001-基本实现

    HTML 中的脚本必须位于 标签之间。 脚本可被放置在 HTML 页面的...

  • 使用jquery封装一个可以复用的提示框

    首先在html中 在script标签中 css样式

  • 使用JS脚本