如何在页面加载时调用 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 元素。