javascript - window.onload ditimpa, bagaimana untuk menyelesaikannya?

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

Hanya tetingkap kedua.onload dilaksanakan, tetapi saya mahu kedua-dua tetingkap.onload dilaksanakan. Apa nak buat?

Answer 1

Kita semua tahu bahawa acara onload hanya boleh dilaksanakan sekali, jadi dengan mengandaikan bahawa anda ingin menjalankan dua fungsi yang dilaksanakan semasa onload, dan akhirnya hanya fungsi acara onload yang terakhir boleh dilaksanakan, maka bagaimana kita melaksanakan fungsi berbilang acara onload? Borangnya adalah seperti berikut :

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

Jadi, mari tambahkan fungsi addLoadEvent(func), yang hanya menerima parameter, iaitu nama fungsi yang dilaksanakan apabila halaman dimuatkan

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

Panggilan:

addLoadEvent(num1);
addLoadEvent(num2);

Answer 2

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

Answer 3

Cadangan: Satu muka surat setiap muka suratwindow.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);  
}  

Jika anda takut menamakan konflik, anda boleh menggunakan ruang tertutup

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

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

Cara 2 adalah menggunakan kaedah di atas.

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