JavaScript教程-JavaScript onload 事件
在 JavaScript 中，可以使用此事件来在页面完全显示后应用特定的函数。它还可以用于验证访问者浏览器的类型和版本。我们可以通过使用 onload 属性来检查页面使用了哪些 cookie。
在 HTML 中，onload 属性在对象加载完毕时触发。此属性的目的是在关联元素加载时执行脚本。
在 HTML 中，onload 属性通常与 <body> 元素一起使用，以在网页的内容（包括 CSS 文件、图像、脚本等）完全加载后执行脚本。它不仅仅限于 标签，还可以与其他 HTML 元素一起使用。
document.onload 和 window.onload 之间的区别在于：document.onload 在图像和其他外部内容加载之前触发。它在 window.onload 之前触发。而 window.onload 则在整个页面加载完成时触发，包括 CSS 文件、脚本文件、图像等。
语法
window.onload = fun()让我们通过一些示例来理解此事件。
示例1
在此示例中，有一个高度为 200 像素、宽度为 200 像素的 div 元素。在页面加载后，我们使用 window.onload() 来更改 div 元素的背景颜色、宽度和高度。
背景颜色设置为 'red'，宽度和高度都设置为 300px。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window.onload()</title>
<style type="text/css">
#bg {
width: 200px;
height: 200px;
border: 4px solid blue;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("bg").style.backgroundColor = "red";
document.getElementById("bg").style.width = "300px";
document.getElementById("bg").style.height = "300px";
};
</script>
</head>
<body>
<h2>This is an example of window.onload()</h2>
<div id="bg"></div>
</body>
</html>解释：
- 创建一个名为 bg 的 div 元素，设置其宽度和高度。
- 使用 window.onload 事件，一旦页面加载完成，就会调用指定的函数。在此情况下，我们将 div 元素的背景颜色、宽度和高度更改为指定的值。
输出
在代码执行并加载页面后，输出如下图所示：
示例2
在此示例中，我们通过使用 DOM 对象的属性和 javascript 函数来实现一个简单的动画。我们使用 JavaScript 函数 getElementById()获取 DOM 对象，然后将该对象分配给全局变量。
<html>
<head>
<script type="text/javascript">
var img = null;
function init() {
img = document.getElementById('myimg');
img.style.position = 'relative';
img.style.left = '50px';
}
function moveRight() {
img.style.left = parseInt(img.style.left) + 100 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id="myimg" src="train1.png">
<center>
<p>点击下面的按钮将图像向右移动</p>
<input type="button" value="点击我" onclick="moveRight();">
</center>
</form>
</body>
</html>解释：
- 获取 ID 为 myimg 的图像元素。
- 使用 window.onload 设置页面加载时要执行的函数为 init 函数，用于初始化图像的位置。
- 定义 init 函数，获取图像元素并设置其样式，使其相对定位，并将左侧距离设置为 50px。
- 定义 moveRight 函数，每次点击按钮时，将图像的左侧距离增加 100px。
输出
成功执行以上代码后，输出如下图所示：
下面是一个示例，其中我们将使用 HTML 的 onload 属性和 JavaScript 函数。
示例3
这是一个简单的示例，演示如何在 HTML 的 onload 属性中使用 JavaScript 中定义的函数。在此示例中，每当文档刷新时，都会调用 alert() 函数。
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function fun() {
alert("Hello World!!, Welcome to the javaTiku.cn");
}
</script>
</head>
<body onload="fun()">
<h1>HTML onload 属性示例</h1>
<p>尝试刷新文档以查看效果。</p>
</body>
</html>解释：
- 定义 fun() 函数，其中调用了 alert() 函数以显示一条提示消息。
- 在
<body>元素的 onload 属性中，指定要在页面加载时执行的函数。
