一个页面中执行两个window.onload函数

 1.问题描述:

当一个HTML页面中加载了两个window.onload=function() {};函数时,页面只会执行第二个window.onload里面的内容

如下,结果显示2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>test</title> 
<script language="javascript"> 
window.onload = function() {
	alert('1');
};

</script> 
</head> 
<body>
	<h1>表格</h1>
	
	<script type="text/javascript">
		window.onload = function() {
			alert('2');
		};
	</script>
</body> 
</html>  

2.解决方法如下,可以显示1,2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>test</title> 
<script language="javascript"> 
window.onload = function() {
	alert('1');
};




</script> 
</head> 
<body>
	<h1>表格</h1>
	
	<script type="text/javascript">
		var saved;
		if (typeof window.onload == 'function') {
			saved = window.onload;
		}
		window.onload = function() {
			if (saved) saved();
			alert('2');
		};
	</script>
</body> 
</html>  

3.优化成函数:

function addEvent(obj,evt,fn) {											
	var saved;
	if (typeof obj["on"+evt] == "function") {
		saved = obj["on"+evt];
	}
	obj["on"+evt] = function () {
		if (saved) saved();		
		fn();				
	}					
}

 

如下,跟2一样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>test</title> 
<script language="javascript"> 
function addEvent(obj,evt,fn) {											
	var saved;
	if (typeof obj["on"+evt] == "function") {
		saved = obj["on"+evt];
	}
	obj["on"+evt] = function () {
		if (saved) saved();		
		fn();				
	}					
}
addEvent(window,'load',firstAll);
function firstAll() {
	alert('1');
}
</script> 
</head> 
<body>
	<h1>表格</h1>
	
	<script type="text/javascript">
		addEvent(window,'load',nextAll);
		function nextAll() {
			alert('2');
		}
	</script>
</body> 
</html>