把javascript函数绑定到onload事件处理函数上
绑定单个函数
window.onload = functionName;
注意事项:下面的两个函数只有最后一个才会被实际执行。
window.onload = functionNameA;
window.onload = functionNameB;
window.onload = functionNameB;
绑定多个函数
window.onload = function(){
functionNameA();
functionNameB();
...
}
说明:这种方式只在需要绑定的函数不是很多的场合。
window.onload = function(){
first();
second();
}
first();
second();
}
通用的做法(作者:Simon Willison 源于:http://simon.incution.com)
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
Examples:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>onload</title>
6 <script type="text/javascript">
7 <!--
8 function addLoadEvent(func){
9 var oldonload = window.onload;
10 if(typeof window.onload != "function"){
11 window.onload = func;
12 }else{
13 window.onload = function(){
14 oldonload();
15 func();
16 }
17 }
18 }
19
20 function aa(){
21 alert(document.getElementById("test"));
22 }
23
24 function bb(){
25 alert(document.getElementById("test").nodeType);
26 }
27
28 function cc(){
29 alert(document.getElementById("test").nodeName);
30 }
31
32 addLoadEvent(aa);
33 addLoadEvent(bb);
34 addLoadEvent(cc);
35 -->
36 </script>
37 </head>
38
39 <body>
40 <p id="test">Hello World!<span>OK!!!</span></p>
41
42 </body>
43 </html>
44
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>onload</title>
6 <script type="text/javascript">
7 <!--
8 function addLoadEvent(func){
9 var oldonload = window.onload;
10 if(typeof window.onload != "function"){
11 window.onload = func;
12 }else{
13 window.onload = function(){
14 oldonload();
15 func();
16 }
17 }
18 }
19
20 function aa(){
21 alert(document.getElementById("test"));
22 }
23
24 function bb(){
25 alert(document.getElementById("test").nodeType);
26 }
27
28 function cc(){
29 alert(document.getElementById("test").nodeName);
30 }
31
32 addLoadEvent(aa);
33 addLoadEvent(bb);
34 addLoadEvent(cc);
35 -->
36 </script>
37 </head>
38
39 <body>
40 <p id="test">Hello World!<span>OK!!!</span></p>
41
42 </body>
43 </html>
44