JavaScript onload 事件

2025年4月2日 | 阅读 3 分钟

在 JavaScript 中，此事件可以在页面完全显示时启动特定函数。它还可以用于验证访问者浏览器的类型和版本。我们可以通过使用 onload 属性来检查页面使用了哪些 cookie。

在 HTML 中，onload 属性在对象加载时触发。此属性的目的是在关联元素加载时执行脚本。

在 HTML 中，onload 属性通常与 <body> 元素一起使用，以在网页内容（包括 CSS 文件、图像、脚本等）完全加载后执行脚本。它不一定只与 <body> 标签一起使用，也可以与其他 HTML 元素一起使用。

document.onload 和 window.onload 的区别是：document.onload 在图像和其他外部内容加载之前触发。它在 window.onload 之前触发。而 window.onload 在整个页面加载完毕时触发，包括 CSS 文件、脚本文件、图像等。

语法

让我们通过一些示例来理解这个事件。

示例 1

在这个示例中，有一个高度为 200px、宽度为 200px 的 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>

输出

代码执行和页面加载后，输出将是 -

示例 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>Click the below button to move the image right</p>   
         <input type = "button" value = "Click Me" onclick = "moveRight();" />  
      </center>   
      </form>  
   </body>  
     
</html>

输出

上述代码成功执行后，输出将是 -

现在，有一个我们将使用 HTML onload 属性和 JavaScript 函数的示例。

Example3

这是一个使用 HTML onload 属性和 JavaScript 中定义函数的一个简单示例。在这个示例中，每当文档刷新时，都会调用 alert() 函数。

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
   function fun() {
      alert("Hello World!!, Welcome to the TpointTech.com");
   }
</script>
</head>
<body onload = "fun()">
<h1> Example of the HTML onload attribute </h1>
<p> Try to refresh the document to see the effect. </p>
</body>
</html>

输出

执行上述代码后，输出将是 -

下一主题JavaScript onresize 事件

JavaScript onload 事件

语法

示例 1

示例 2

Example3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript onload 事件

语法

示例 1

示例 2

Example3

相关帖子

JavaScript dblclick 事件

JavaScript onclick 事件

JavaScript addEventListener()

JavaScript 事件

JavaScript onresize 事件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器