script之load事件

最新推荐文章于 2024-11-11 20:00:00 发布

转载最新推荐文章于 2024-11-11 20:00:00 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AndyWithPassion/archive/2011/09/04/script_onload.html

文章标签：

#javascript #ViewUI

本文介绍如何利用script标签的load事件实现脚本加载后的初始化工作，包括不同浏览器版本下的兼容性处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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