这几天敲例子老看到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.onload=ShowMessage();
- window.onload=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.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