javascript - window.onload is overwritten, how to solve it?

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

Only the second window.onload is executed, but I want both window.onload to be executed. What to do?

Answer 1

We all know that the onload event can only be executed once, so assuming that you want to run two functions executed during onload, and finally only the function of the latter onload event can be executed, then how do we execute the functions of multiple onload events? The form is as follows :

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

So, let’s add a function addLoadEvent(func), which only accepts parameters, which is the name of the function that is executed when the page is loaded

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

Call:

addLoadEvent(num1);
addLoadEvent(num2);

Answer 2

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

Answer 3

It is recommended that one page be usedwindow.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);  
}  

If you are afraid of naming conflicts, you can use a closed space

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

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

Method 2 is to use the method upstairs.

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