javascript - window.onload被覆蓋，怎麼解決？

Question

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);  
  
  
}  

只執行了第二個window.onload,但是我想讓兩個window.onload都執行。怎麼處理？

Answer 1

我們都知道onload事件只能執行一次，所以假設你要執行兩個onload時候執行的函數，最後只能執行後一個onload事件的函數，那麼我們要如何執行多個onload事件的函數呢，
形式如下：

window.onload = function(){
num1();
num2();
}

所以，我們就頂一個函數addLoadEvent(func),它只接受參數，就是在頁面載入完畢時執行的函數的名字

function addLoadEvent(func){  
    var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。  
    if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数，就像平时那样把新函数添加给它  
        window.onload = func;  
    }else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾  
        window.onload = function(){  
            oldonload();  
            func();  
        }  
    }  
  
}  

呼叫：

addLoadEvent(num1);
addLoadEvent(num2);

Answer 2

window.addEventListener('load',function(e){state1},false);
window.addEventListener('load',function(e){state2},false);
不建議使用onload

Answer 3

建議 一個頁面就一個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);  
    })();
}  

Answer 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);