[轉貼] onload 事件

文章由 **心靈捕手** » 2014-09-18, 11:02

onload 事件用來設計當網頁載入完成後，觸發特定的 JavaScript 函式去執行特定的工作，常見的應用如網頁載入後顯示對話視窗、載入框架、顯示歡迎光臨、跳出第二層網頁 ... 等，雖然這樣的技巧相當好用，但使用過多可能會造成網頁載入完成時間延長，影響網頁的使用體驗。onload 通常有兩種寫法，第一種是直接寫在 HTML 的開頭 <body> 標籤內，這樣的寫法不需要 JavaScript 帶出即可運作，第二種則是透過 JavaScript 的 window object 物件方式，帶出 onload 的功能，兩者同樣都是要用來觸發 JavaScript 的特定 function 去執行任務。

onload 基本語法

代碼: 選擇全部

onload = " 要觸發的 javascript function"

引號內的觸發 function 是必須的，畢竟 onload 是個 event，其最大功用還是要告訴特定的 function 開始工作，以下分為兩種常見的寫法範例，由於 onload 會在網頁載入完成後立即執行，所以本頁的範例輸出都已經是執行完的結果。

範例一、直接將 onload 寫在 <body> 標籤裡

代碼: 選擇全部

<script language="javascript">
function ShowHello(){
    document.getElementById('ShowBox').innerHTML='哈囉';
}
</script>
<body onload="ShowHello()">
<span id="ShowBox"></span>
</body>

範例輸出結果

代碼: 選擇全部

哈囉

範例直接把 onload 事件寫在 <body> 標籤內，當網頁載入到 <body> 標籤時，瀏覽器就會知道待會兒載入完成要觸發 ShowHello 函式，到此時 onload 的工作其實就算完成，顯示＂哈囉＂的工作是 ShowHello 函式會去完成。這裡稍微說明一下 ShowHello 函式內的運作，首先透過 DOM 的 document.getElementById 取得要顯示文字的 span 區域，然後透過 innerHTML 將字串＂哈囉＂寫入，即大功告成。

範例二、將 onload 寫在 JavaScript 裡

代碼: 選擇全部

<script language="javascript">
window.onload=ShowHello;
function ShowHello(){
    document.getElementById('ShowBox').innerHTML='哈囉';
}
</script>
<body>
<span id="ShowBox"></span>
</body>

範例輸出結果

代碼: 選擇全部

哈囉

範例二不將 onload 寫在 <body> 標籤內，而是在一開始的 JavaScript 程式碼區就先寫好，這樣的優點是 <body> 標籤比較乾淨，如果設計師將整個 JavaScript 寫成外掛模組的方式，那整個網頁的程式碼就會更乾淨，也是一種相當不錯的設計習慣。

延伸閱讀

--
資料來源：
http://www.wibibi.com/info.php?tid=388