javascript - window.onload被覆蓋,怎么解決?
問題描述
window.onload = function(){ var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); } window.onload = function(){ var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); }
只執(zhí)行了第二個(gè)window.onload,但是我想讓兩個(gè)window.onload都執(zhí)行。該怎么處理?
問題解答
回答1:我們都知道onload事件只能執(zhí)行一次,所以假設(shè)你要運(yùn)行兩個(gè)onload時(shí)候執(zhí)行的函數(shù),最后只能執(zhí)行后一個(gè)onload事件的函數(shù),那么我們?nèi)绾螆?zhí)行多個(gè)onload事件的函數(shù)呢,形式如下:
window.onload = function(){num1();num2();}
所以,我們就頂一個(gè)函數(shù)addLoadEvent(func),它只接受參數(shù),就是在頁面加載完畢時(shí)執(zhí)行的函數(shù)的名字
function addLoadEvent(func){ var oldonload = window.onload; //把現(xiàn)在有window.onload事件處理函數(shù)的值存入變量oldonload。 if(typeof window.onload != ’function’){ //如果這個(gè)處理函數(shù)還沒有綁定任何函數(shù),就像平時(shí)那樣把新函數(shù)添加給它 window.onload = func; }else{ //如果在這個(gè)處理函數(shù)上已經(jīng)綁定了一些函數(shù)。就把新函數(shù)追加到現(xiàn)有指令的末尾 window.onload = function(){ oldonload(); func(); } } }
調(diào)用:
addLoadEvent(num1);addLoadEvent(num2);回答2:
window.addEventListener(’load’,function(e){state1},false);window.addEventListener(’load’,function(e){state2},false);不建議用onload
回答3:建議 一個(gè)頁面就一個(gè)window.onload
window.onload = function(){ var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); }
如果怕命名沖突,可用封閉空間
window.onload = function(){ (function(){var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); })();(function(){var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); })();} 回答4:
方法1
function fn1(){ var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); }function fn2(){ var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); }window.onload = function(){ fn1(); fn2();}
方法2是用樓上的方法。
window.addEventListener(’load’,function(e){fn1();},false);window.addEventListener(’load’,function(e){fn2();},false);
相關(guān)文章:
1. javascript - 移動(dòng)端textarea不能上下滑動(dòng),該怎么解決?2. javascript - vuex報(bào)錯(cuò) this.$store.dispatch is not a function,怎么解決?3. 前端 - [css動(dòng)畫] transition動(dòng)畫之后執(zhí)行display:none,動(dòng)畫不生效,怎么解決?4. javascript - nidejs環(huán)境設(shè)置操作一直出現(xiàn)這種問題怎么解決?5. javascript - H5移動(dòng)端下拉出現(xiàn)黑色背景怎么解決?6. nginx 500錯(cuò)誤,怎么解決?7. python - angular route 與 django urls 沖突怎么解決?8. javascript - nodemailer連接超時(shí),怎么解決?9. javamail - android使用163的smtp服務(wù)發(fā)送郵件時(shí)老會(huì)出現(xiàn)554 DT:SPM這個(gè)問題,不知怎么解決?10. javascript - vue: 父組件給子組件傳遞數(shù)據(jù),子組件接收到了,但是報(bào)錯(cuò),怎么解決?
