如何在页面加载时调用JavaScript函数?

本教程将教会我们在页面加载时调用JavaScript函数。在许多情况下，在使用HTML和JavaScript编程时，程序员需要在加载网页或网页加载完成后调用一个函数。例如，程序员需要在页面加载时向用户显示欢迎消息，并且需要在页面加载事件后调用JavaScript函数。

有多种方法可以在页面加载或页面加载后调用函数，本教程将逐一介绍这些方法。

使用 < body>标签中的 onload事件
使用 window.onload 事件
使用 DOMContentLoaded 事件

使用`<body>`标签中的onload事件

调用页面加载时的函数的第一种方法是在HTML <body>标签中使用 onload 事件。如您所知，HTML body包含了整个网页的内容，当所有HTML body在网页浏览器中加载完成时，它将调用JavaScript中的函数。

语法

按照以下语法在标签中使用 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事件

这里，我们有第二种方法可以在页面加载时调用函数。每个网页默认包含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
});

示例

下面的示例演示了使用 DOMContentLoaded 事件在页面加载时触发函数调用。

<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>

当函数执行时，用户还将看到带有消息的警告框。