javascript - window.onload est écrasé, comment le résoudre ?

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

Seul le deuxième window.onload est exécuté, mais je souhaite que les deux window.onload soient exécutés. Ce qu'il faut faire?

Answer 1

Nous savons tous que l'événement onload ne peut être exécuté qu'une seule fois, donc en supposant que vous souhaitiez exécuter deux fonctions exécutées pendant le chargement, et finalement seule la fonction de ce dernier événement onload peut être exécutée, alors comment exécuter les fonctions de plusieurs onload événements ? Le formulaire est le suivant :

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

Donc, ajoutons une fonction addLoadEvent(func), qui n'accepte que les paramètres, qui est le nom de la fonction qui est exécutée lorsque la page est chargée

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

Appel :

addLoadEvent(num1);
addLoadEvent(num2);

Answer 2

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

Answer 3

Suggestion : Une page par pagewindow.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);  
}  

Si vous avez peur des conflits de noms, vous pouvez utiliser un espace fermé

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

Méthode 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();
} 

La méthode 2 consiste à utiliser la méthode ci-dessus.

window.addEventListener('load',function(e){fn1();},false);
window.addEventListener('load',function(e){fn2();},false);