在網頁載入後執行 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