javascript
JavaScript之共享onload
我們知道,當(dāng)我們將JS代碼腳本放到<head></head>標(biāo)簽之間時(shí),這是的js代碼加載要先于DOM加載,而我們往往會(huì)在JS代碼腳本中寫一些獲取DOM元素的代碼,而此時(shí)的DOM是不完整的,
所以我們通常的解決方法是將函數(shù)放入到window.onload里面去,window.load事件是網(wǎng)頁(yè)加載完畢時(shí)會(huì)觸發(fā)的一個(gè)事件，如果將我們的函數(shù)與之綁定,我們的函數(shù)也會(huì)在頁(yè)面加載完畢之后執(zhí)行.
如下代碼：
<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>這段代碼在瀏覽器執(zhí)行時(shí)就會(huì)報(bào)錯(cuò),aa is null;因?yàn)樵趈s獲取id=target的div時(shí),該div還沒(méi)有加載完畢。所以我們需要這樣來(lái)解決這個(gè)問(wèn)題，代碼如下:
<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>這個(gè)時(shí)候代碼正常輸出:DIV;? nodeName默認(rèn)輸出標(biāo)簽名的大寫形式;
這似乎已經(jīng)解決了我們的問(wèn)題,但是不夠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>這個(gè)時(shí)候任然會(huì)報(bào)錯(cuò):dd id null;錯(cuò)誤原因和上面一樣；
解決辦法有兩個(gè):
1、將需要綁定window.onload事件的兩個(gè)函數(shù)寫到一個(gè)匿名函數(shù)里面,在將該匿名函數(shù)與window.onload事件綁定,ok,問(wèn)題解決！
但是這個(gè)方法只能解決需要綁定window.onload事件的函數(shù)較少的情況,一旦那些函數(shù)有很多,這個(gè)方法就不是很好！
<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、這是一個(gè)彈性最佳的解決方案?????? 不管你打算在頁(yè)面加載完畢是執(zhí)行多少個(gè)函數(shù),他都能應(yīng)付自如；代碼如下:
<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);}//定義一個(gè)addOnLoadEvent的函數(shù) function addOnLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != "function") {window.onload = func; //如果window.onload事件沒(méi)有綁定任何function則正常綁定 }else {//如果window.onload事件已經(jīng)綁定了函數(shù),則在原來(lái)的基礎(chǔ)上,繼續(xù)添加新的函數(shù)window.onload = function () {oldonload();func();};}}</script> </head> <body> <div id="ab">1</div> <div id="abc">2</div> </body> </html>上面的addOnloadEvent()方法解決了我們的問(wèn)題,但是還不夠全面,因?yàn)楫?dāng)需要綁定的方法過(guò)多時(shí),我們就要寫多條addOnLoadEvent(方法)；所以為了減少代碼量這里的代碼還可以這樣改，
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script type="text/javascript">var onloadlist = [aa,bb];//定義一個(gè)數(shù)組,數(shù)組里面都是需要在頁(yè)面加載完畢之后才執(zhí)行的函數(shù)引用 addOnLoadEvent(onloadlist);function aa() {alert(1);}function bb() {alert(2);}function addOnLoadEvent(eventlist) {//循環(huán)遍歷數(shù)組依次加到隊(duì)列中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>這樣就一定程度上減少了代碼量，還便于管理方法的執(zhí)行先后順序。
?
轉(zhuǎn)載于:https://www.cnblogs.com/GreenLeaves/p/5726271.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript之共享onload的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： hdu 5451 Best Solver
- 下一篇： 皮蛋为什么含铅重？