script之load事件

关于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的一种方法, 如果有多个, 是并行下载, 并且下载完成立马执行. 所以如果多个脚本资源动态加载而且要确保它们的依赖关系, 那就要稍微复杂些了.

简单的分析,就到这里, 如果有发现问题,欢迎指出 : )