📅 最后修改于: 2023-12-03 15:11:27.857000 🧑 作者: Mango
当一个网页被访问时，它需要加载所有的HTML、CSS和JavaScript文件。这些文件的加载可能需要一些时间。如果JavaScript代码被放在<head>标签中，那么在加载完所有的JavaScript代码之前用户将看不到网页内容。为了避免这种情况，我们可以使用JavaScript的window.onload事件。
window.onload 事件在页面加载完成后触发。在这个事件中，我们可以执行一些初始化操作，例如修改网页元素的样式、设置表单元素的默认值，以及初始化JavaScript库的代码等。
window.onload = function() {
// 执行代码
};
在这个示例中，我们把一个匿名函数赋值给了window.onload事件。当页面加载完成后，这个函数就会被调用。
<!DOCTYPE html>
<html>
<head>
<title>示例：使用 window.onload </title>
<script>
window.onload = function() {
// 修改网页元素的样式
var header = document.getElementById("header");
header.style.backgroundColor = "blue";
// 设置表单元素的默认值
var username = document.getElementById("username");
username.value = "请输入用户名";
};
</script>
</head>
<body>
<h1 id="header">欢迎访问我的网站</h1>
<form>
<label for="username">用户名：</label>
<input type="text" id="username">
</form>
</body>
</html>
在这个示例中，我们使用window.onload来修改网页元素的样式，并设置表单元素的默认值。