如何在页面加载时调用 JavaScript 函数？
本教程将教我们在页面加载时调用 JavaScript 函数。在许多情况下，在使用 HTML 和 JavaScript 进行编程时，程序员需要在加载网页时或网页加载完成后调用函数。例如，程序员需要在页面加载时向用户显示欢迎消息，并且程序员需要在页面加载事件之后调用 JavaScript 函数。
在 JavaScript 中，有多种方法可以在页面加载时或页面加载后调用函数，我们将在本教程中逐一介绍。
在 <body> 标签中使用 onload 事件
使用 window.onload 事件
使用 DOMContentloaded 事件
在 <body> 标签中使用 onload 事件
在页面加载时调用函数的第一种方法是在 HTML <body> 中使用 onload 事件标签。如您所知，HTML 主体包含网页的全部内容，当所有 HTML 主体在 Web 浏览器上加载时，它将从 JavaScript 调用该函数。
语法
按照以下语法在 <body> 标签中使用 onload 事件。
<body onload = "functionToCall()" > // HTML 内容 </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 {
// 页面加载时执行的代码
}
命名函数的语法。
Function simpleFunction ( ) {
// 函数主体
}
Window.onload = simpleFunction( );
示例
在下面的示例中，我们使用 window.onload 属性在页面加载时调用命名函数。
<html>
<head>
<title> 在页面加载时调用 JavaScript 函数。</title>
</head>
<body>
<h2> 在页面加载时调用 JavaScript 函数的方法。</h2>
<h4> 在 JavaScript 中使用 <i>window.onload</i> 事件在页面加载时调用 JavaScript 函数。</h4>
<div id="message"> </div>
<script type="text/javascript">
window.onload = simpleFunction( 10, 20 ); // 在页面加载时调用带参数的函数
function simpleFunction( num1, num2 ) {
alert(" num1 和 num2 之和为 " + ( num1 + num2 ) );
message.innerHTML = "显示警告框后的消息。"
}
</script>
</body>
</html>
使用 DOMContentLoaded 事件
JavaScript 有一个很酷的事件监听器功能，用户可以在任何事件触发时调用函数或执行某些操作。在这种方法中，我们将使用"DOMContentloaded"事件。我们将使用 JavaScript 中的 addEventListener() 方法调用所需的函数。此外，我们将把事件监听器应用于整个文档，这样我们就可以在页面加载时调用函数。
语法
要调用 DOMContentLoaded 事件，用户可以遵循以下语法。
document.addEventListener("DOMContentLoaded", function() {
// function body
});
示例
以下示例演示了如何使用 DOMContentLoded 事件在页面加载时触发函数调用。
<html>
<head>
<title> 在页面加载时调用 JavaScript 函数。</title>
</head>
<body>
<h2> 在页面加载时调用 JavaScript 函数的方法。</h2>
<h4> 使用 <i>document.addEventListener( ) </i>方法在页面加载时调用 JavaScript 函数。</h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
document.addEventListener( "DOMContentLoaded", functionCall());
function functionCall() {
alert( "页面加载时调用函数。" );
message.innerHTML = "页面加载时成功执行函数主体。"
}
</script>
</body>
</html>
当函数执行时，用户还将看到带有消息的警告框。
结论
在这里，我们定义了三种方法来在页面加载时触发函数调用。第一种方法我们可以在 HTML 代码中使用，第二种方法可以在 JavaScript 代码中使用，第三种方法是实现我们目标的最佳方法。
此外，用户可以更改第三种方法中的事件以在特定事件上触发函数。最后一种方法中还有一件事是，用户不仅可以将事件侦听器触发到整个文档，还可以将其应用于特定的 HTML 元素。
