页面加载后执行的 JavaScript - Javascript

在 web 开发中，我们经常需要在页面加载后执行一些 JavaScript 代码，用来完成一些特殊的功能，比如：

• 改变元素的样式
• 请求数据
• 操作 DOM 元素
• 检查表单数据是否合法

等等。在这篇文章中，我们将介绍几种在页面加载后执行 JavaScript 代码的方法。

1. 使用 window.onload

window.onload 方法是传统的执行 JavaScript 代码的方法，它会在页面及所有资源（如图片等）加载完成后执行指定的代码。代码示例：

window.onload = function() {
  // 在这里编写需要在页面加载完毕后执行的代码
};

这种方法的缺点是，它只能执行一个函数，如果多个模块需要在页面加载后执行 JavaScript 代码，就需要将它们合并到一个函数中。

2. 使用 document.addEventListener

addEventListener 方法可以将多个函数绑定到同一个事件上，从而达到同样的效果。使用 document.addEventListener 方法可以在页面加载后执行 JavaScript 代码。代码示例：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里编写需要在页面加载完毕后执行的代码
});

相较于 window.onload 方法， document.addEventListener 方法的优点是可以将多个模块的代码分别封装到各自的函数中，然后绑定到同一个事件上，使得代码的结构更加清晰。

3. 使用 jQuery

如果你使用了 jQuery 库，那么你可以使用 ready 方法来执行 JavaScript 代码，代码示例：

$(document).ready(function() {
  // 在这里编写需要在页面加载完毕后执行的代码
});

jQuery.ready 方法和 document.addEventListener 方法非常类似，它的优点是代码简洁易懂，且可以兼容各种浏览器。

4. 使用 ES6 的箭头函数

如果你使用了 ES6，那么你可以使用箭头函数来简化代码，代码示例：

document.addEventListener('DOMContentLoaded', () => {
  // 在这里编写需要在页面加载完毕后执行的代码
});

这种方法与 document.addEventListener 方法是等价的。你可以根据自己的喜好来选择使用哪种方法。

结论

以上就是几种在页面加载后执行 JavaScript 代码的方法。根据实际情况，你可以选择其中的一种或多种方法来实现你的需求。在编写 JavaScript 代码时，一定要注意代码的可读性和可维护性，尽量将代码分门别类，使其结构清晰，易于拓展和维护。

本文同步发布于 CSDN 博客。