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>
建議的做法是方法三或是方法二；不建議使用方法一，因為使用方法一，容易使程式碼分散各處，造成維護困難。
沒有留言:
張貼留言