在網頁載入後執行 JavaScript 程式碼
-
在 JavaScript 中的
body
標籤末尾新增script
標籤 -
在 JavaScript 中使用
onload
事件 -
在 JavaScript 中的
body
標籤上使用onload
事件 -
在 JavaScript 檔案中的
window
物件上使用onload
事件
在執行任何 JavaScript 程式碼之前,我們始終必須確保首先在瀏覽器上呈現所有 HTML 元素。由於我們將在 JavaScript 程式碼中引用這些 HTML 元素,因此需要在網頁之前載入這些元素。
在 head
標籤內編寫 script
標籤不是一個好主意(這僅在你將第三方指令碼載入到程式碼中時才有意義),因為 HTML 文件是從上到下執行的,而 head
標籤是出現在 body
標籤之前。因此,它將首先執行,然後是 body
標籤。
由於我們所有的網頁內容都存在於 body
標籤內,而 body
標切換現在 head
標籤之後,因此不需要在 head
內新增 JavaScript 程式碼,因為它將無法找到 HTML 元素。請注意,到目前為止,尚未建立元素。
在所有網頁的內容完全呈現在螢幕上之後,有多種方法可以載入 JavaScript。以下是一些眾所周知的方法,你可以在網頁完全載入後按照這些方法執行 JavaScript 程式碼。
在 JavaScript 中的 body
標籤末尾新增 script
標籤
在 body
標籤的末尾新增一個 script
標籤是載入 JavaScript 程式碼的常用方法。至此,網頁的所有內容都在螢幕上正確呈現。因此,我們可以輕鬆地在 JavaScript 程式碼中找到或引用這些 HTML 元素,而不會在此過程中遇到任何錯誤。
下面的程式顯示了它是如何完成的。
<body>
<script></script>
</body>
在 JavaScript 中使用 onload
事件
在頁面載入後執行 JavaScript 的另一種方法是使用 onload
方法。onload
方法等待頁面載入完畢。一旦這樣做,這個過程就會執行 JavaScript 程式碼。
有兩種編寫 JavaScript 程式碼的方法。一種方法是在 body
標籤下方的 script
標籤內編寫 JavaScript 程式碼,然後呼叫 onload
方法內的函式。你還可以建立一個單獨的檔案來編寫 JavaScript 程式碼,在 body
標籤末尾的 HTML 中連結該檔案,然後在 onload
方法內呼叫該函式。
在 JavaScript 中的 body
標籤上使用 onload
事件
onload
方法需要一個 target
變數。在這種情況下,我們將在 body
標籤上使用 onload
方法,使其成為 target
。
在 onload
方法中,我們只需要傳入一個函式。現在,這個函式只有在網頁的所有內容都完全載入後才會執行。
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
輸出:
function called...
在 body
標籤中,我們只有一個 h1
標籤和一個 script
標籤。在 script
標籤中,我們有一個 myFunction()
函式,它向 function called...
控制檯視窗列印一條訊息。要在頁面載入後執行此函式,我們只需將其傳遞到 onload
方法中。
在 JavaScript 檔案中的 window
物件上使用 onload
事件
使用 onload
方法的另一種方法是在 window
物件上。window 物件代表整個瀏覽器視窗。在瀏覽器視窗中的元素完全執行後,我們可以使用 onload
方法執行我們的 JavaScript 程式碼。
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
在這裡,我們有與上一個相同的程式碼。這裡唯一的區別是我們在 window
物件上使用了 onload
方法,該物件現在是目標。程式最終將呼叫該函式,並在控制檯視窗上列印訊息函式呼叫...
。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn