JavaScript onload属性

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

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

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

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

语法

window.onload = fun()

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

示例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>

输出

代码执行并加载页面后，输出如下 –

JavaScript onload属性

示例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>

输出

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

JavaScript onload属性

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

示例3

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

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
   function fun() {
      alert("Hello World!!, Welcome to the javaTpoint.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 onload属性