给window.onload事件赋不同的参数，执行顺序不一样哦！

最新推荐文章于 2022-09-02 17:53:49 发布

ECHOutopia

最新推荐文章于 2022-09-02 17:53:49 发布

阅读量937

点赞数

本文探讨了window.onload属性在网页加载过程中的作用及表现差异。通过两个实例对比了将其设置为函数调用与直接赋值的区别，揭示了正确使用window.onload确保页面完全加载后再执行JavaScript代码的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天敲例子老看到window.onload，有意思的是，每次赋值不同，界面执行函数显示顺序不一样，为什么呢？

一、现象

例1：先弹出框——window.onload成了一个普通变量

[html]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    
 <html>    
     <head>    
         <title>Untitled</title>    
             <script type="text/javascript">    
   
                 function ShowMessage()    
                 {  alert("true"); }    
                 function AlertMessage()  
                 {  alert("again"); }   
                 window.onload=ShowMessage();  
                 window.onload=AlertMessage();     
   
             </script>    
   
     </head>    
     <body>  当你看到true时看不到我 </body>    
   
 </html>    

当你看到true的弹出框的时候，你肯定没有看到“当你看到true时看不到我”，说明页面还没有载入完就已经开始执行js了。

PS：这样可以同时加载多个函数，只是界面出来的晚。

例2 —— 后弹出框——window.onload为事件

[html]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    
 <html>    
     <head>    
         <title>Untitled</title>    
             <script type="text/javascript">    
                 function ShowMessage()    
                     {  alert("true");  }   
                 function AlertMessage()  
                     {alert("again");}   
                 window.onload=function(){ShowMessage();}  
                 window.onload=function(){AlertMessage();}    
             </script>    
     </head>   
     <body>  你看到true时就看到我了  </body>    
 </html>    

当你看到弹出框的时候，你也会看到“你看到弹出框时就看到我了”，这个才是真正的页面载入完才触发。但是后一个函数覆盖前一个函数。

PS:该方法使用匿名函数执行，这种形式不可以同时加载多个函数，需要变形：

window.onload=function()

{

ShowMessage();AlertMessage();

}

二、结论

window.onload必须是赋值为function类型的时候才能够在页面加载完成时被调用，其他情况下，就会覆盖成一个普通的全局变量了。

functionShowMessage()

{ alert("true"); }

window.onload=ShowMessage();

ShowMessage这个方法执行过后的返回值是undefined，window.onload=ShowMessage();相当于执行：ShowMessage();window.onload=undefined;这两句。function对象如果只是赋值，不能够带括号的，你只需要：window.onload=ShowMessage；这样就可以了。带括号表示先执行function，然后将执行结果赋值。

原文地址：http://blog.youkuaiyun.com/wangyongxia921/article/details/19639711