window.onload
window.onload 的基本形式:
window.onload = function () { // Do something... }
特別注意一點:如果直接把新動作附在 window.onload 的話,是會把前一個 window.onload 的動作給蓋掉的。也就是说,同一个JS文件下,只能有一个window.onload
不過如果現在有兩個動作都需要用到 window.onload ,而且其中一個我不想改動時該怎麼辦呢? (例如是第三方函式庫裡的程式)
這時可以改用以下的方式:
var oldOnload = window.onload || function () {}; window.onload = function () { oldOnload(); // Do Something... }
換句話說,就是先把舊的 window.onload 放在一個變數裡,然後在新的 window.onload 裡呼叫它。
很重要的一點是,一定要加上「 || function () {} 」!這樣做的目的,是怕如果在此之前沒有指定 window.onload (也就是 undefined) 時,瀏覽器會出現 JavaScript 錯誤。
另外,可以通过将对象绑定事件的方法实现:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>window.onload用法-蚂蚁部落</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid red; } </style> <script type="text/javascript"> window.attachEvent("onload",bg); window.attachEvent("onload",changeW); function bg(){ document.getElementById("bg").style.backgroundColor="#F90"; } function changeW(){ document.getElementById("bg").style.width="200px"; } </script> </head> <body> <div id="bg"></div> </body> </html>
通过逻辑判断进行实现
function firstFunction(){ alert("hello firstFun !"); } function secondFunction(){ alert("hello secondFun !"); } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } //测试 addLoadEvent(firstFunction); addLoadEvent(secondFunction);
那onload中的JS文件的执行顺序是怎样的呢?它是在整个DOM文档加载完成后才会执行的,请看下面的代码
<html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta HTTP-EQUIV="Content-Type" content="charset=utf-8"> </head> <script> alert('2'); </script> <body onload="init1()"> <div id='myDiv' style="height:200px;width:200px;background-color:#000000"> <script> alert('3'); </script> </div> </body> <script> function init1(){ alert('1'); } alert('4'); </script> </html>
执行的顺序为:2,3,4,1;所以我们一般不会将页面布局的函数放在onload中,因为这样会造成页面加载的延迟现象。
总结onload的用法:
1. 可以在Body 里面执行 <body onload="alert(123)"></body>
2. 先定义好 在页面加载完成后使用
function test(){ var aa = "11111"; alert(aa); }
window.onload = test; </script>
注解: 这里的window.onload = test; 不要在test后面加() 因为这是在给事件关联触发的方法 如果加() 会立刻引发这个方法的执行(这可能不是我们的本意)
3. 使用匿名函数 <script>window.onload = function(){alert(321);}</script>
4. JS中onload多个事件该怎么写?
<1> <body onload="aa();bb();cc()">用分号隔开就可以了
<2>
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
refer:http://blog.moocss.com/tutorials/javascript-tutorials/526.html
http://www.softwhy.com/forum.php?mod=viewthread&tid=6191
http://www.jb51.net/article/32624.htm