我们在写js的时候经常要动态加载一段js脚本,比如下面这种代码
var js = document.createElement('script');
js.type = 'text/javascript';
js.async = true;
js.src = 'http://example.com/static.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(js, s);
这里我指定了异步加载async=true
,那么我怎么才知道这个脚本是否加载完成呢?而且http://example.com/static.js
里的内容是我完全不能控制的,也就是不能在里面加个回调callback
来表示加载完成,大家有什么思路吗?
你可以用script的onload事件判断
js.onload = function() {
alert("loaded");
}
function Script(callback){
var js = document.createElement("script");
this.js = js;
js.setAttribute("type",'text/javascript');
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);
if(navigator.appName.toLowerCase().indexOf('netscape') == -1){
js.onreadystatechange = function(){
if(js.readyState == 'complete'){
callback(js);
}
}
}else{
js.onload = function(){
callback(js);
}
}
}
Script.prototype.get = function(url){
this.js.src = url;
}
function script_onload(script){
alert(script.src);
}
var load_js = new Script(script_onload);
load_js.get('http://static.gongju.com/js/jquery-1.4.4.min.js');
正文完