动态加载js

1,如何动态加载js文件,并且加载完成之后调用其中的函数呢?

Js代码

function loadJs(url, callback) {
var done = false;
var script = document.createElement('script');
script.type = 'text/javascript';//do not 'application/javascript',because Low version of the browser is not compatible
script.language = 'javascript';
script.charset = "utf-8";
script.src = url;
//script.setAttribute('src', url);
script.onload = script.onreadystatechange = function () {
if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')) {
done = true;
script.onload = script.onreadystatechange = null;
if (callback) {
console.log('load '+url+' success.');
callback.call(script);
}
}
};
document.getElementsByTagName("head")[0].appendChild(script);
};

loadJs 功能:

动态加载js文件,即异步加载js文件,

并且在回调函数中可以调用该js文件中的函数或变量

实例:

Html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul, li {
/*list-style: outside none none;*/
list-style-type: none;
margin-left: 0;
}
li label {
width: 20%;
float: left; /* It is necessary */
}
li.button {
text-align: center;
margin-left: -40px;
}
input.errorBorder {
border: solid 1px #ff0000;
}
</style>
<script type="text/javascript" src="page.js" ></script>
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript" src="common_util.js" ></script>
</head>
<body>
<form action="">
<ul style="width: 400px">
<li>
<label for="username">用户名</label><input id="username" type="text"/> <span>用户名不能为空</span>
</li>
<li>
<label for="password">密码</label><input id="password" type="text"/>
</li>
</ul>
</form>
<script type="text/javascript">
loadJs('jplaceholder.js', function () {
$('#username').placeholder({
word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 3, minLen: 2, errorBorderClass: 'errorBorder',
keyup_callback: function () {
console.log('keyup_callback');
},keydown_callback: function () {
console.log('keydown...');
}
});
$('#password').placeholder({word: '请输入密码', normalFontColor: '#f00', color: '#ddd'}, function () {
console.log('callback');
});
});
</script>
</body>
</html>

相同功能的方法有:

Js代码

function loadJS2(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = "utf-8";
if (script.readyState) { // 兼容IE的旧版本
script.onreadystatechange = function () {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
callback();
}
}
}
else {
script.onload = function () {
callback();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
function xhrLoadJS(url, callback) {
var xhr = createXHR();
xhr.open('get', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304/*页面未修改*/) {
var script = document.createElement('script');
script.type = 'text/script';
script.charset = "utf-8";
script.text = xhr.responseText;
eval(xhr.responseText); // 执行代码
document.body.appendChild(script);
if (callback && typeof callback === 'function') {
callback();
}
}
}
};
xhr.send(null);
}
/*获取异步请求的对象*/
var createXHR = function () {
try {
xhr = new XMLHttpRequest();
return xhr;
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
} catch (ee) {
xhr = false;
}
}
if (!xhr && typeof XMLHttpRequest != 'undefined') {
new ActiveXObject("Msxml2.XMLHTTP");
return xhr;
}
};

时间： 2024-09-13 10:44:24

动态加载js的相关文章

jquery动态加载js三种方法

<!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd&qu

jquery动态加载js三种方法实例

这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript("test.js");就OK了. 复制代码代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dt

js异步动态加载js与css文件代码

jquery动态加载css,js文件方法简单很, 例方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 function loadjs(file){ var head = $('head').remove('#loadscript'); $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:

异步动态加载JS并运行

这篇文章主要是对异步动态加载JS并运行的示例代码进行了介绍.需要的朋友可以过来参考下,希望对大家有所帮助如下所示: 代码如下: (function(){ var ga=document.createElement('script');ga.type?=?'text/javascript';?ga.async?=?true; ga.src?=?('https:'?==?document.location.protocol???'https://ssl'?:?'http://www')?+

动态加载js、css等文件跨iframe实现

这篇文章主要介绍了动态加载js.css等文件跨iframe实现的方法,需要的朋友可以参考下 1.动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中加载js.css文件和 dom元素? *同级之间可以调用,可以通过子-父-子的方式调用同级 parent.parentFram("这个方法在调用其他子farme"); 1.

三种动态加载js的jquery实例代码另附去除js方法_javascript技巧

复制代码代码如下: !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.

动态加载js、css的简单实现代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

动态加载js、css的实例代码_javascript技巧

jquery实现动态加载js文件的例子

一.jQuery getScript()方法加载javascript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {/* 做一些加载完成后需要执行的事情 */}); 这个getScript方法返回一个jqxhr,你可以像下面这样用它: j