資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在頁面載入時呼叫 JavaScript 函式？
本教程將教你如何在頁面載入時呼叫JavaScript 函式。在許多情況下，使用HTML和JavaScript進行程式設計時，程式設計師需要在載入網頁時或網頁載入完成後呼叫函式。例如，程式設計師需要在頁面載入時向用戶顯示歡迎訊息，並且程式設計師需要在頁面載入事件後呼叫 JavaScript 函式。
有多種方法可以在 JavaScript 中在頁面載入時或頁面載入後呼叫函式，我們將在本教程中逐一介紹。
在 `<body>` 標籤中使用 `onload` 事件
使用 `window.onload` 事件
使用 `DOMContentLoaded` 事件
在 `<body>` 標籤中使用 `onload` 事件
在頁面載入時呼叫函式的第一種方法是在HTML `<body>` 標籤內使用**`onload`**事件。如你所知，HTML body 包含網頁的全部內容，當所有 HTML body 在 Web 瀏覽器上載入時，它將呼叫 JavaScript 中的函式。
語法
請遵循以下語法在`<body>`標籤中使用`onload`事件。
<body onload = "functionToCall()" > // HTML content </body>
示例
在下面的示例中，我們建立了一個名為`welcomeFunction()`的 JavaScript 函式。我們使用 `onload` 事件從`<body>`標籤呼叫該函式，它會在警告框中向用戶顯示歡迎訊息。
<!DOCTYPE html>
<head>
<title> Call JavaScript function on page load. </title>
</head>
<body onload = "welcomeFunction()" >
<h2> Methods to call a JavaScript function on page load. </h2>
<h4> Call the JavaScript function on page load by using <i> onload </i> event in the HTML body tag. </h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
function welcomeFunction() {
alert( "welcome to the tutorialsPoint!" );
message.innerHTML = "Function executed successfully on page load."
}
</script>
</body>
</html>當用戶執行示例程式碼時，他們會在警告框中收到歡迎訊息。函式執行完成後，使用者將收到上述輸出訊息。
在 JavaScript 中使用 `window.onload` 事件
這是在 JavaScript 中在頁面載入時呼叫函式的第二種方法。每個網頁預設都包含`**window**`物件，`window`物件代表全域性變數。我們可以使用 `window` 物件訪問 JavaScript 中的任何全域性變數或函式。在這種方法中，我們將使用 `window` 物件的 `onload` 屬性。
透過使用`window.onload`屬性，使用者可以呼叫命名函式，也可以將匿名函式繫結到 `window.onload`，並且匿名函式內的所有程式碼都將在頁面載入後執行。
語法
使用者可以遵循以下語法使用 `window.onload` 在頁面載入時呼叫函式。
匿名函式的語法。
Window.onload = function {
// code to execute on the page load
}命名函式的語法。
Function simpleFunction ( ) {
// function body
}
Window.onload = simpleFunction( );示例
在下面的示例中，我們使用 `window.onload` 屬性在頁面載入時呼叫命名函式。
<html>
<head>
<title> Call JavaScript function on page load. </title>
</head>
<body>
<h2> Methods to call a JavaScript function on page load. </h2>
<h4> Call the JavaScript function on page load by using <i>window.onload</i> event in the JavaScript. </h4>
<div id="message"> </div>
<script type="text/javascript">
window.onload = simpleFunction( 10, 20 ); // call function with parameters on page load
function simpleFunction( num1, num2 ) {
alert(" The sum of num1 and num2 is " + ( num1 + num2 ) );
message.innerHTML = "Showing the message after alert box."
}
</script>
</body>
</html>使用 `DOMContentLoaded` 事件
JavaScript 有一個很酷的事件監聽器特性，使用者可以在任何事件觸發時呼叫函式或執行某些操作。在這種方法中，我們將使用“`**DOMContentLoaded**`”事件。我們將使用 JavaScript 中的`addEventListener()`方法呼叫所需的函式。此外，我們將事件監聽器應用於整個文件，以便我們可以在頁面載入時呼叫函式。
語法
要呼叫 `DOMContentLoaded` 事件，使用者可以遵循以下語法。
document.addEventListener("DOMContentLoaded", function() {
// function body
});示例
下面的示例演示了使用 `DOMContentLoded` 事件在頁面載入時觸發函式呼叫的方法。
<html>
<head>
<title> Call JavaScript function on page load. </title>
</head>
<body>
<h2> Methods to call a JavaScript function on page load. </h2>
<h4> Call the JavaScript function on page load by using <i>document.addEventListener( ) </i>method.</h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
document.addEventListener( "DOMContentLoaded", functionCall());
function functionCall() {
alert( "function call on the page load." );
message.innerHTML = "Function body executed successfully on page load."
}
</script>
</body>
</html>當函式執行時，使用者也會看到帶有訊息的警告框。
結論
在這裡，我們定義了三種在頁面載入時觸發函式呼叫的方法。第一種方法可以在 HTML 程式碼中使用，第二種方法在 JavaScript 程式碼中使用，第三種方法是實現目標的最佳方法。
此外，使用者可以更改第三種方法中的事件，以便在特定事件上觸發函式。最後一種方法中還有一點，與其將事件監聽器觸發到整個文件，不如將其應用於特定的 HTML 元素。
55K+ 次瀏覽
