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

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

  • 相关阅读:
    LightOJ1074(spfa+dfs标记负环及负环能够到达的点)
    (模板)AC自动机模板
    poj3660(floyd最短路)
    (模板)hdoj2544(最短路--bellman-ford算法&&spfa算法)
    hdoj4099(字典树+高精度)
    poj1056(字符串判断是否存在一个字符串是另一个字符串的前缀)
    hdoj1247(字典树)
    poj3630||hdoj1671(字典树)
    (模板)hdoj1251(字典树模板题)
    poj3348(求凸包面积)
  • 原文地址:https://www.cnblogs.com/AndyWithPassion/p/script_onload.html
Copyright © 2011-2022 走看看