关于script的load事件
不管是以标签形式,还是以Dom对象的形式,我们都能很好的利用其load事件 来做些对于此脚本的初始化工作或者别的一些有意义的事情.
目前IE9+, Chrome, Firefox都已支持script的load事件, 对于IE6~8的版本,我们可以用其特有的onreadystatechange事件来做同样的事情
下面给出例子,并做一些说明.
标签形式如下:
正如你看到的,这种使用方式很简单, 但其对IE系列的支持只有IE9+,所以下面的例子会比较重点, 我们用script的DOM对象来干活
var domscript = document.createElement('script');
domscript.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";
domscript.doneState = { loaded: true, complete: true};
if(domscript.onreadystatechange !== undefined) {
// IE6+ support, chrome, firefox not support
domscript.onreadystatechange = function() {
console.log("script element state:" + domscript.readyState);
if(domscript.doneState[domscript.readyState] ) {
init();
}
}
} else {
// IE9+, chrome, firefox support
domscript.onload = function() {
console.log("script loaded");
init();
};
}
document.getElementsByTagName('head')[0].appendChild(domscript);
function init() {
$('<h1>jQuery is available to use</h1>').appendTo('body');
}
我们创建了script的一个Dom对象, 并指定了其src属性, 这里用了if分支和条件domscript.onreadystatechange !== undefined来区别浏览器, 当然我们也可以用browser detection方式来判断, IE9+, Firefox, chrome直接用onload, IE6~8用onreadystatechange.
原因在于IE中DOM对象支持某个事件,但未绑定任何方法时,其值为null.例如domscript的readystatechange事件未绑定方法前, domscript.onreadystatechange的值是null
而在其他标准浏览器中,domscript.onreadystatechange在未赋值前,其值是undefined, 当然firefox和chrome的script Dom对象根本不支持此事件, 写了也不会调用
值得一提的是这种DOM Script的方式也是动态加载javascript的一种方法, 如果有多个, 是并行下载, 并且下载完成立马执行. 所以如果多个脚本资源动态加载而且要确保它们的依赖关系, 那就要稍微复杂些了.
简单的分析,就到这里, 如果有发现问题,欢迎指出 : )