JS add script tag to dynamically call script

时间:2021-08-08 13:42:58

//IE:
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function() {
if(this.readyState == "loaded" || this.readyState == "complete"){
alert("success!");
}
}
script.setAttribute("src",scripts[i]); //Opera、FF、Chrome等:
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onload = function() {
alert("done!");
}
script.setAttribute("src",scripts[i]);

/**
* 串联加载指定的脚本
* 串联加载[异步]逐个加载,每个加载完成后加载下一个
* 全部加载完成后执行回调
* @param array|string 指定的脚本们
* @param function 成功后回调的函数
* @return array 所有生成的脚本元素对象数组
*/ function seriesLoadScripts(scripts,callback) {
if(typeof(scripts) != "object") var scripts = [scripts];
var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //递归
s[i] = document.createElement("script");
s[i].setAttribute("type","text/javascript");
s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this);
if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback();
}
}
s[i].setAttribute("src",scripts[i]);
HEAD.appendChild(s[i]);
};
recursiveLoad(0);
} /**
* 并联加载指定的脚本
* 并联加载[同步]同时加载,不管上个是否加载完成,直接加载全部
* 全部加载完成后执行回调
* @param array|string 指定的脚本们
* @param function 成功后回调的函数
* @return array 所有生成的脚本元素对象数组
*/ function parallelLoadScripts(scripts,callback) {
if(typeof(scripts) != "object") var scripts = [scripts];
var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0;
for(var i=0; i<scripts.length; i++) {
s[i] = document.createElement("script");
s[i].setAttribute("type","text/javascript");
s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
loaded++;
this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this);
if(loaded == scripts.length && typeof(callback) == "function") callback();
}
};
s[i].setAttribute("src",scripts[i]);
HEAD.appendChild(s[i]);
}
}

Example: var scripts = [
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
"http://wellstyled.com/files/jquery.debug/jquery.debug.js"
]; //这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
//然后你可以使用下面的方法调用并在成功后执行回调了。 seriesLoadScripts(scripts,function(){ /*
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itemDivider : '<hr>',
listDOM : 'all'
}); */
alert('脚本加载完成啦');
}); 这里使用的是串联加载的函数,当然你也可以使用并联加载函数,这可以根据情况使用,建议每下一个脚本对上一个脚本有依赖性的使用串联加载,否则使用并联,因为原理上并联要比串联快那么些。

  

JS add script tag to dynamically call script的更多相关文章

  1. js&comma;add script async&quest; loaded ok&period;

    function loadScript(url, callback){ var script = document.createElement_x("script") script ...

  2. HTML script tag type all in one

    HTML script tag type all in one script type https://developer.mozilla.org/en-US/docs/Web/HTML/Elemen ...

  3. &sol;&sol;string scriptstrs &equals; &quot&semi;&lt&semi;script&gt&semi;alert&lpar;&&num;39&semi;欢迎光临!&&num;39&semi;&rpar;&semi;&lt&semi;&sol;script&gt&semi;&quot&semi;&semi;

    //string scriptstrs = "<script>alert('欢迎光临!');</script>"; //if (!Page.ClientSc ...

  4. &lbrack;LeetCode&rsqb; 415&period; Add Strings&lowbar;Easy tag&colon; String

    Given two non-negative integers num1 and num2 represented as string, return the sum of num1 and num2 ...

  5. &lt&semi;script&gt&semi;document&period;write&lpar;location&period;href&rpar;&lt&semi;&sol;script&gt&semi;

    <script>document.write(location.href)</script> 什么意思?

  6. 深入比特币原理(四)——锁定脚本&lpar;locking script&rpar;与解锁脚本&lpar;unlocking script&rpar;

    通常比特币都是以虚拟货币的概念出现在大众眼前,实际上比特币是第一个真正的区块链"平台",利用它去中心化.不可篡改.可追溯等特点不光可以实现多种交易模式(如点对点交易.多重签名交易等 ...

  7. 前端高质量知识&lpar;二&rpar;-JS执行上下文&lpar;执行环境&rpar;详细图解Script

    先随便放张图 我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? var a = 20; PS: 变量提 ...

  8. jquery add&lpar;&rpar; 和js add&lpar;&rpar;

    HTML DOM add() 方法 HTML DOM Select 对象 定义和用法 add() 方法用于向 <select> 添加一个 <option> 元素. 语法 sel ...

  9. ASP&period;NET 动态创建文本框 TextBox &lpar;add TextBox to page dynamically&rpar;

    下面的函数每执行一次就生成一个TextBox(其实是<input type="Text">)    var i=0;     function changeIt()   ...

随机推荐

  1. Android&colon;Toast

    Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.而且Toast主要用于向用户显示提示消 ...

  2. HTML 学习笔记 JavaScript &lpar;变量&rpar;

    变量是储存信息的容器. 实例 var x=2; var y=3; var z=x+y; 就像代数那样 x=2 y=3 z=x+y 在代数中,我们使用字母(比如 x)来保存值(比如 2).通过上面的表达 ...

  3. 警惕!MySQL成数据勒索新目标

    据最新报道显示,继MongoDB和Elasticsearch之后,MySQL成为下个数据勒索目标,从2月12日凌晨开始,已有成百上千个开放在公网的MySQL数据库被劫持,删除了数据库中的存储数据,攻击 ...

  4. POPTEST老李谈Debug和Release的区别(c&num;)2

    二.哪些情况下 Release 版会出错 有了上面的介绍,我们再来逐个对照这些选项看看 Release 版错误是怎样产生的 1. Runtime Library: 2. 优化:这类错误主要有以下几种: ...

  5. 关于深度学习中的batch&lowbar;size

    5.4.1 关于深度学习中的batch_size 举个例子: 例如,假设您有1050个训练样本,并且您希望设置batch_size等于100.该算法从训练数据集中获取前100个样本(从第1到第100个 ...

  6. python常用模块&colon; random模块&comma; time模块&comma; sys模块&comma; os模块&comma; 序列化模块

    一. random模块  import random # 任意小数 print(random.random()) # 0到1的任意小数 print(random.uniform(-10, 10)) # ...

  7. oi初级数学知识

    一.先是一些整除的性质: •整除:若a=bk,其中a,b,k都是整数,则b整除a,记做b|a. •也称b是a的约数(因数),a是b的倍数 •显而易见的性质: •1整除任何数,任何数都整除0 •若a|b ...

  8. windows service&lpar;system权限&rpar;创建用户权限进程

    windows编程的人都知道,在其操作系统下,进程被创建,通常被赋予很多属性,其中一项属性就是用户名,及进程所属的权限.打开任务管理器,可查看到. 通常桌面系统explorer的权限是User权限,即 ...

  9. 安徽师大附中&percnt;你赛day5 T3 树上行走 解题报告

    树上行走 题目背景 \(\mathrm{Smart}\) 的脑洞非常大, 经常幻想出一些奇怪的东西. 题目描述 某一天,\(\mathrm{Smart}\) 幻想出了一棵没有边际的二叉树,脑补着在那棵 ...

  10. poj 1185 状压dp&plus;优化

    http://poj.org/problem?id=1185 炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 291 ...