2017年7月6日 星期四

javascript系列之window.onload事件

window.onload事件

關鍵字:window.onload,document.getElementById(),找不到網頁元素,body onload

在撰寫JavaScript程式碼時,會經常使用 document.getElementById()去取得網頁中的元素(Element):


var obj = document.getElementById("content");


我們也習慣將JavaScript程式碼置於<head> ... ... </head>之內 。

<html>
<head>
<title></title>

<script type="text/javascript">
var obj = document.getElementById("content");
alert(obj.innerHTML);
</script>

</head>

<body>
<div id="content"></div>
</body>
</html>

但是,上述的程式有個嚴重的問題,程式碼 var obj = document.getElementById("content");,欲取得網頁中的元素ID為"content"的元素,但整個網頁尚未完整下載之前,先執行了這行程式var obj = document.getElementById("content"); 欲取得網頁元素,便產生了找不到該元素的錯誤。

解決方法:

方法一:將程式碼移到該網頁元素之後。

<html>
<head>
<title></title>

<script type="text/javascript">

</script>

</head>

<body>
<div id="content"></div>
</body>
<script type="text/javascript">
var obj = document.getElementById("content");
alert(obj.innerHTML);
</script>
</html>

方法二:將程式碼寫入<body> 的onLoad觸發事件中。

<html>
<head>
<title></title>
<script type="text/javascript">
function init(){
var obj = document.getElementById("content");
alert(obj.innerHTML);
}
</script>


</head>

<body onLoad="init();">
<div id="content">It is a book !</div>
</body>


</html>

方法三:將程式碼寫入 window.onload 事件中。

<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
var obj = document.getElementById("content");
alert(obj.innerHTML);
};
</script>


</head>

<body>
<div id="content">It is a book !</div>
</body>


</html>


建議的做法是方法三或是方法二;不建議使用方法一,因為使用方法一,容易使程式碼分散各處,造成維護困難。

沒有留言:

張貼留言