JavaScript window.onload和body.onload之间的区别

JavaScript window.onload和body.onload之间的区别

在「windows onloads」和「body onloads」之间存在一些细微的差别,但在接近它们的差异之前,我们首先需要了解这些onload是什么。之后,我们将了解它们在不同场景中的使用情况,进而注意到它们之间的细微差异。

onloads: 当一个对象完全加载时,onloads事件就会触发,onload事件分为两种类型:windows onload和body onload。

  1. Windows onload: 这个窗口的onload事件在开始时触发。
  2. Body onload: 这个body的onload事件会在所有内容下载完毕后触发,如果我们想要找到一个元素并更新其样式或内容,那么body onload是正确的选择。

注意: 如果更新样式和内容对您来说不重要,那么使用哪个onload就无关紧要。

下面的示例阐明了windows onload和body onload之间的差别:

<!DOCTYPE html> 
<html> 
   <head> 
   </head> 
   <body onload="bodyLoad()"> 
      <div id="B1"> 
         <h1 style="color: green;">GeeksforGeeks</h1> 
           
<p>A Computer Science Portal for Geeks</p> 
  
      </div> 
      <script> 
          
        // Body onload 
         function bodyLoad() { 
             alert("Alert from body_onload"); 
             alert("content from d1: " 
                   + document.getElementById("d1").innerText); 
         } 
           
         // Window onload  
         function winLoad() { 
             alert("Alert from window_onload"); 
             if (document.getElementById("B1") != null) { 
                 alert("Content from body: " 
                       + document.getElementById("B1").innerText); 
             } 
             else { 
                 alert("Failed to find B1"); 
             } 
         } 
         window.onload = winLoad(); 
      </script> 
   </body> 
</html>
HTML

输出:

  • Window onload:

JavaScript window.onload和body.onload之间的区别

  • 网页加载完成时:

JavaScript window.onload和body.onload之间的区别

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册