Executing multiple onloads is overwritten

When a page executes multiple window.onload, it will be overwritten by the last one, and the first n contents will not be executed, such as

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 we definitely want both window.onloads to execute.

method one:

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

function num1(){
console.log(the statement to be executed by the first function);
}

function num1(){
console.log(the statement to be executed by the first function);
}

Method Two:

function addLoadEvent(func){  
    var oldonload = window.onload; //Save the value of the window.onload event handler to the variable oldonload.  
    if(typeof window.onload != 'function'){ //If this handler does not have any function bound yet, add the new function to it as usual  
        window.onload = func;  
    }else{ //If some functions are already bound to this handler. appends the new function to the end of the existing instruction  
        window.onload = function(){  
            oldonload();  
            func();  
        }  
    }  
  
}  
transfer:
addLoadEvent(num1);
addLoadEvent(num2);

Not perfect: I see many blogs recommending method 2, but if this is the case, it will only execute the last window.onload:

function addLoadEvent(func){  
    var oldonload = window.onload; //Save the value of the window.onload event handler to the variable oldonload.  
    if(typeof window.onload != 'function'){ //If this handler does not have any function bound yet, add the new function to it as usual  
        window.onload = func;  
    }else{ //If some functions are already bound to this handler. appends the new function to the end of the existing instruction  
        window.onload = function(){  
            oldonload();  
            func();  
        }  
    }  
  
}  
transfer:
addLoadEvent(num1);
addLoadEvent(num2);

Your own is called, and then your colleague writes a loading event in the next js:
window.onload = function(){              
    console.log('Finally another page loading function')
}  

The result is properly overwritten, and only the content of the last window.load will be executed.

Method 3: The third method to try can solve the above problem

/**
     * window.onload loads multiple functions
     * */
    function addLoadEvent(func) {

        if (document.all){
            window.attachEvent("onload",func)//For IE
        }
        else{
            window.addEventListener("load",func,false);//对于FireFox
        }
    }

references:

https://www.cnblogs.com/liwenjuan/p/3454435.html

https://segmentfault.com/q/1010000009857374

Executing multiple onloads is overwritten

Guess you like