数据结构
网络
关系数据库管理系统 (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+ 次浏览
