1. 程式人生 > >window.onload的使用方法

window.onload的使用方法

window.onload是在頁面載入完之後再載入的,程式是從上往下執行的,如果你不加window.onload.它會先執行<script></script>中的部分再執行body裡面的

1,以一個簡單延時提示框為例子:

 程式碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>延時提示框</title>
		<style type="text/css">
			#div1{
				width: 50px;
				height: 50px;
				background-color: red;
				float: left;
				margin: 10px;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: #CCCCCC;
				display: none;
				float: left;
			}
		</style>
		<script type="text/javascript">
		window.onload=function(){
				var oDiv1=document.getElementById('div1');
				var oDiv2=document.getElementById('div2');
				var timer=null;
				
				oDiv1.onmouseover=oDiv2.onmouseover=function()
				{
				 //設定div1的作用是:第二次移動到div1時,關閉div2設定的延時
				 //設定div2的作用是:滑鼠在div2時,關閉定時器
				   clearTimeout(timer); 
					oDiv2.style.display='block';
				};
				oDiv1.onmouseout=oDiv2.onmouseout=function()
				//div2的mouseout是為了設定延時,滑鼠從div2移動到div1過程中,div2不會隱藏
				{
                    timer=setTimeout(function(){  //設定一個延時 
					    oDiv2.style.display='none';
					
                    },500);
				};
				
				
			}
		</script>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>
這樣是正確的  而你刪除window.onload後會顯示  Cannot set property 'onmouseover' of null
    at 延時提示框.html:28
(anonymous) @ 延時提示框.html:28


而當你window.onload並且把<script></script>放到<body></body>下面,它又可以正常運行了

這就說明了window.onload的作用


2.使用window.onload時,例如一些點選事件,滑鼠移入移出事件要在script中定義,而不能在body裡的標籤裡面設定

這裡以一個點選運動為例子

這是使用window.onload方法的

程式碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				oBtn=document.getElementById('btn1');
				var timer=null;
				oBtn.onclick=function()
				{
					var oDiv=document.getElementById('div1');
					clearInterval(timer);//把之前開的定時器關閉,保證不管點選多少次,只有一個定時器在工作
					timer=setInterval(function(){
						var speed=1;
						if(oDiv.offsetLeft>=300)
						{
							clearInterval(timer);
						}
						else{
							oDiv.style.left=oDiv.offsetLeft+speed+'px';
						}
					},30)
				}	
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="開始運動" />
		<div id="div1">
			
		</div>
	</body>
</html>
這個時候,如果把點選事件寫到body中
即:

<script type="text/javascript">
			window.onload=function(){
				oBtn=document.getElementById('btn1');
				var timer=null;
				function startMove()
				{
					var oDiv=document.getElementById('div1');
					clearInterval(timer);//把之前開的定時器關閉,保證不管點選多少次,只有一個定時器在工作
					timer=setInterval(function(){
						var speed=1;
						if(oDiv.offsetLeft>=300)
						{
							clearInterval(timer);
						}
						else{
							oDiv.style.left=oDiv.offsetLeft+speed+'px';
						}
					},30)
				}	
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="開始運動" onclick="startMove()"/>
		<div id="div1">
			
		</div>
	</body>

就會顯示:Uncaught ReferenceError: startMove is not defined
    at HTMLInputElement.onclick (js運動基礎.html:37)


onclick @ js運動基礎.html:37

因為它先執行的onclick事件,後執行window.onload中的startMove方法,這個時候把window.onload刪掉就可以了

程式碼如下:

<script type="text/javascript">
			
				oBtn=document.getElementById('btn1');
				var timer=null;
				function startMove()
				{
					var oDiv=document.getElementById('div1');
					clearInterval(timer);//把之前開的定時器關閉,保證不管點選多少次,只有一個定時器在工作
					timer=setInterval(function(){
						var speed=1;
						if(oDiv.offsetLeft>=300)
						{
							clearInterval(timer);
						}
						else{
							oDiv.style.left=oDiv.offsetLeft+speed+'px';
						}
					},30)
				}	
			
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="開始運動" onclick="startMove()"/>
		<div id="div1">
			
		</div>
	</body>