JS add script tag to dynamically call script
//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的更多相关文章
- js,add script async? loaded ok.
function loadScript(url, callback){ var script = document.createElement_x("script") script ...
- 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 ...
- //string scriptstrs = "<script>alert('欢迎光临!');</script>";
//string scriptstrs = "<script>alert('欢迎光临!');</script>"; //if (!Page.ClientSc ...
- [LeetCode] 415. Add Strings_Easy tag: String
Given two non-negative integers num1 and num2 represented as string, return the sum of num1 and num2 ...
- <script>document.write(location.href)</script>
<script>document.write(location.href)</script> 什么意思?
- 深入比特币原理(四)——锁定脚本(locking script)与解锁脚本(unlocking script)
通常比特币都是以虚拟货币的概念出现在大众眼前,实际上比特币是第一个真正的区块链"平台",利用它去中心化.不可篡改.可追溯等特点不光可以实现多种交易模式(如点对点交易.多重签名交易等 ...
- 前端高质量知识(二)-JS执行上下文(执行环境)详细图解Script
先随便放张图 我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? var a = 20; PS: 变量提 ...
- jquery add() 和js add()
HTML DOM add() 方法 HTML DOM Select 对象 定义和用法 add() 方法用于向 <select> 添加一个 <option> 元素. 语法 sel ...
- ASP.NET 动态创建文本框 TextBox (add TextBox to page dynamically)
下面的函数每执行一次就生成一个TextBox(其实是<input type="Text">) var i=0; function changeIt() ...
随机推荐
- redis 设置密码验证
1.找到配置文件:如/etc/redis/redis.conf 2.找到以下内容 # requirepass foobared 3.修改为(redispassword是密码) requirepass ...
- 判断Datable是否有数据
采用any()方法 检查表格的数据是否为空 var table = $('#example').DataTable(); if ( ! table.data().any() ) { alert( 'E ...
- js数据结构与算法--递归
递归,函数自己调用自己 return 返回值, 后面的代码不执行 function fn(num){ console.log(num) if(num == 0){ return; } fn(num-1 ...
- GoF23种设计模式之结构型模式之桥接模式
一.概述 将类的抽象部分与实现分部分离开来,使它们都可以独立地变化. 二.适用性 1.你不希望在抽象和实现之间有一个固定的绑定关系的时候.例如:在程序运行时实现部分应可以被选择或切换. ...
- pandas知识点(数据结构)
1.Series 生成一维数组,左边索引,右边值: In [3]: obj = Series([1,2,3,4,5]) In [4]: obj Out[4]: 0 1 1 2 2 3 3 4 4 5 ...
- 使用HTTP协议访问网络
在Android上发送http请求有2种方式,分别由两个类完成,HttpURLConnection和HttpClient. 一.使用HttpURLConnection方式 1.1 建立连接的基本步骤 ...
- Reading comprehension HDU - 4990 (矩阵快速幂 or 快速幂+等比数列)
;i<=n;i++) { )ans=(ans*+)%m; %m; } 给定n,m.让你用O(log(n))以下时间算出ans. 打表,推出 ans[i] = 2^(i-1) + f[i-2] 故 ...
- OpenCV学习笔记(二) cv::Mat
部分内容转自:OpenCV Tuturial,ggicci 在OpenCV Tuturial中可查看Mat的初始化与打印方法. Mat本质上是由两个数据部分组成的类: 矩阵头(包含矩阵尺寸,存储方法, ...
- loj2045 「CQOI2016」密钥破解
CQOI 板子大赛之 pollard rho #include <iostream> #include <cstdio> using namespace std; typede ...
- leetcode 【 Search for a Range 】python 实现
题目: Given a sorted array of integers, find the starting and ending position of a given target value. ...