📌  相关文章
📜  页面加载时执行 javascript 函数 - Javascript (1)

📅  最后修改于: 2023-12-03 14:58:44.917000             🧑  作者: Mango

页面加载时执行 JavaScript 函数 - JavaScript

在 Web 开发中，有时需要在页面加载时执行 JavaScript 函数。这可以确保在页面完全加载并准备好使用之前，所有必要的代码已经执行。

1. 在 body 结束标签前执行函数

一种简单的实现方式是将 JavaScript 函数嵌入到 HTML 文件中，并在 body 结束标签前调用它。例如：

<body>
  <!-- HTML 页面内容 -->
  <script>
    function myFunction() {
      // 在此处编写要执行的代码
    }

    myFunction();
  </script>
</body>

在这个例子中，通过将 JavaScript 函数嵌入到 body 元素内，可以确保在页面完全加载并生成时运行该函数。

2. 使用事件监听器

另一种常见的实现方式是使用事件监听器。可以使用 DOMContentLoaded 事件来确保在页面完全加载和解析时运行 JavaScript 函数。

<body>
  <!-- HTML 页面内容 -->
  <script>
    function myFunction() {
      // 在此处编写要执行的代码
    }

    document.addEventListener("DOMContentLoaded", myFunction);
  </script>
</body>

在此例子中，myFunction 函数使用 document.addEventListener 在 DOMContentLoaded 事件上注册。当页面上的所有资源都已加载和解析时，该事件将被触发，从而在 myFunction 函数中执行必要的 JavaScript 代码。

3. 使用 window.onload

最后一种方法是使用 window.onload 事件来确保页面完全加载后运行 JavaScript 函数。

<body>
  <!-- HTML 页面内容 -->
  <script>
    function myFunction() {
      // 在此处编写要执行的代码
    }

    window.onload = myFunction;
  </script>
</body>

与 DOMContentLoaded 事件不同，window.onload 事件将等待页面及其所有资源（包括图片和脚本文件）完全加载和解析后才会被触发。这使得它成为确保 JavaScript 函数在完全加载后运行的可靠的方法。

以上是三种在页面加载时执行 JavaScript 函数的方法。无论您选择哪种方法，在确保页面完全加载并准备好使用之前执行 JavaScript 函数都是很重要的，以确保能够正确地处理并使用页面上的每个元素。