javascript
JavaScript之共享onload
我們知道,當我們將JS代碼腳本放到<head></head>標簽之間時,這是的js代碼加載要先于DOM加載,而我們往往會在JS代碼腳本中寫一些獲取DOM元素的代碼,而此時的DOM是不完整的,
所以我們通常的解決方法是將函數放入到window.onload里面去,window.load事件是網頁加載完畢時會觸發的一個事件，如果將我們的函數與之綁定,我們的函數也會在頁面加載完畢之后執行.
如下代碼：
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">var aa = document.getElementById("target");alert(aa.nodeName);</script> </head> <body><div id="target"></div> </body> </html>這段代碼在瀏覽器執行時就會報錯,aa is null;因為在js獲取id=target的div時,該div還沒有加載完畢。所以我們需要這樣來解決這個問題，代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">window.onload = bb;function bb() {var aa = document.getElementById("target");alert(aa.nodeName);}</script> </head> <body><div id="target"></div> </body> </html>這個時候代碼正常輸出:DIV;? nodeName默認輸出標簽名的大寫形式;
這似乎已經解決了我們的問題,但是不夠perfect，如下代碼：
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">window.onload = bb;cc();function bb() {var aa = document.getElementById("target");alert(aa.nodeName);}function cc() {var dd = document.getElementById("Div1");alert(dd);}</script> </head> <body><div id="target"></div><div id="Div1"></div> </body> </html>這個時候任然會報錯:dd id null;錯誤原因和上面一樣；
解決辦法有兩個:
1、將需要綁定window.onload事件的兩個函數寫到一個匿名函數里面,在將該匿名函數與window.onload事件綁定,ok,問題解決！
但是這個方法只能解決需要綁定window.onload事件的函數較少的情況,一旦那些函數有很多,這個方法就不是很好！
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">window.onload = ee;function bb() {var aa = document.getElementById("target");alert(aa.nodeName);}function cc() {var dd = document.getElementById("Div1");alert(dd.firstChild.nodeValue);}function ee() {bb();cc();}</script> </head> <body><div id="target"></div><div id="Div1">asdas</div> </body> </html>?
2、這是一個彈性最佳的解決方案?????? 不管你打算在頁面加載完畢是執行多少個函數,他都能應付自如；代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">addOnLoadEvent(aa);addOnLoadEvent(bb);function aa() {var aa=document.getElementById("ab");alert(aa.firstChild.nodeValue);}function bb() {var bb = document.getElementById("abc");alert(bb.firstChild.nodeValue);}//定義一個addOnLoadEvent的函數 function addOnLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != "function") {window.onload = func; //如果window.onload事件沒有綁定任何function則正常綁定 }else {//如果window.onload事件已經綁定了函數,則在原來的基礎上,繼續添加新的函數window.onload = function () {oldonload();func();};}}</script> </head> <body> <div id="ab">1</div> <div id="abc">2</div> </body> </html>上面的addOnloadEvent()方法解決了我們的問題,但是還不夠全面,因為當需要綁定的方法過多時,我們就要寫多條addOnLoadEvent(方法)；所以為了減少代碼量這里的代碼還可以這樣改，
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">var onloadlist = [aa,bb];//定義一個數組,數組里面都是需要在頁面加載完畢之后才執行的函數引用 addOnLoadEvent(onloadlist);function aa() {alert(1);}function bb() {alert(2);}function addOnLoadEvent(eventlist) {//循環遍歷數組依次加到隊列中window.onload = function () {for (var i = 0; i < eventlist.length; i++) {eventlist[i]();}}}</script> </head> <body> <div id="ab">1</div> <div id="abc">2</div> </body> </html>這樣就一定程度上減少了代碼量，還便于管理方法的執行先后順序。
?
轉載于:https://www.cnblogs.com/GreenLeaves/p/5726271.html
總結
以上是生活随笔為你收集整理的JavaScript之共享onload的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu 5451 Best Solver
- 下一篇： JS中避免命名冲突的三个方法