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

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

_Cassie

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

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript window.onload

本文链接：https://blog.youkuaiyun.com/wangyongxia921/article/details/19639711

Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在网页开发中使用window.onload事件时的不同赋值方式及其对执行顺序的影响，解释了为何在某些情况下会覆盖成普通全局变量，以及如何正确使用window.onload来确保页面加载完成后执行指定函数。

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

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

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

一、现象

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

<!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.οnlοad=ShowMessage();
				window.οnlοad=AlertMessage();   

			</script>  

	</head>  
	<body>  当你看到true时看不到我 </body>  

</html>

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

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

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

<!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.οnlοad=function(){ShowMessage();}
				window.οnlοad=function(){AlertMessage();}  
			</script>  
	</head> 
	<body>  你看到true时就看到我了  </body>  
</html>

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

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

window.οnlοad=function()

{

ShowMessage();AlertMessage();

}

二、结论

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

functionShowMessage()

{ alert("true"); }

window.οnlοad=ShowMessage();

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