dodanie do zdarzenia window.onload?

Question

Zastanawiam się, jak dodać inne wywołanie metody do zdarzenia window.onload, po tym, jak zostało już przypisane wywołanie metody .

Załóżmy gdzieś w skrypcie mam to zadanie ...

window.onload = function(){ some_methods_1() }; 

a następnie później w skrypcie mam to zadanie

window.onload = function(){ some_methods_2() }; 

Jak się stoi, tylko some_methods_2 zostanie wywołana . Czy istnieje sposób na dodanie do poprzedniego połączenia zwrotnego window.onload bez anulowania some_methods_1? (a także bez uwzględnienia obu some_methods_1() iw tym samym bloku funkcyjnym).

Myślę, że to pytanie nie jest tak naprawdę o window.onload, ale pytanie o javascript w ogóle. NIE chcę przypisywać czegoś do window.onload w taki sposób, że gdyby inny programista pracował nad skryptem i dodał fragment kodu, który również używa window.onload (bez patrzenia na mój poprzedni kod), wyłącza moje zdarzenie onload .

Ja też zastanawiałem się samo o

$(document).ready() 

w jQuery. Jak mogę dodać do tego, nie niszcząc tego, co było wcześniej, ani co może później przyjść?

Answer 1

Jeśli używasz jQuery, nie musisz robić nic specjalnego. Koparki dodane przez $(document).ready() nie nadpisać nawzajem, lecz wykonać kolejno:

$(document).ready(func1) 
... 
$(document).ready(func2) 

---

Jeśli nie używasz jQuery, można wykorzystać addEventListener, o czym świadczy Karaxuna plus attachEvent dla IE 9 < .

Należy pamiętać, że onload nie jest odpowiednikiem $(document).ready() - ten pierwszy czeka na CSS, obrazy ... jak również, podczas gdy drugi oczekuje tylko na drzewo DOM. Współczesne przeglądarki (i IE od IE9) obsługują zdarzenie DOMContentLoaded w dokumencie, które odpowiada zdarzeniu jQuery ready, ale nie ma go.

if(window.addEventListener){ 
    window.addEventListener('load', func1) 
}else{ 
    window.attachEvent('onload', func1) 
} 
... 
if(window.addEventListener){ 
    window.addEventListener('load', func2) 
}else{ 
    window.attachEvent('onload', func2) 
} 

---

Jeśli żadna opcja jest dostępna (na przykład, nie mają do czynienia z węzłów DOM), nadal można to zrobić (używam onload jako przykład, ale inne opcje są dostępne onload):

var oldOnload1=window.onload; 
window.onload=function(){ 
    oldOnload1 && oldOnload1(); 
    func1(); 
} 
... 
var oldOnload2=window.onload; 
window.onload=function(){ 
    oldOnload2 && oldOnload2(); 
    func2(); 
} 

lub, aby uniknąć zanieczyszczenia globalnej przestrzeni nazw (i prawdopodobnie napotyka kolizje przestrzeni nazw), korzystając z importu/eksportu Iife wzoru:

window.onload=(function(oldLoad){ 
    return function(){ 
    oldLoad && oldLoad(); 
    func1(); 
    } 
})(window.onload) 
... 
window.onload=(function(oldLoad){ 
    return function(){ 
    oldLoad && oldLoad(); 
    func2(); 
    } 
})(window.onload) 

Answer 2

Można użyć attachEvent (IE8) i addEventListener zamiast

addEvent(window, 'load', function(){ some_methods_1() }); 
addEvent(window, 'load', function(){ some_methods_2() }); 

function addEvent(element, eventName, fn) { 
    if (element.addEventListener) 
     element.addEventListener(eventName, fn, false); 
    else if (element.attachEvent) 
     element.attachEvent('on' + eventName, fn); 
} 

Answer 3

Istnieją zasadniczo dwa sposoby

1. sklep poprzednia wartość window.onload więc kod może wywołać poprzednią obsługi jeśli występuje przed lub po tym, jak twój kod wykonuje

2. przy użyciu podejścia addEventListener (oczywiście Microsoft nie lubi i wymaga użycia innej nazwy).

Druga metoda daje nieco większe bezpieczeństwo, jeśli inny skrypt chce wykorzystać window.onload i robi to bez zastanowienia do współpracy, ale głównym założeniem jest obsługa JavaScript że wszystkie skrypty będą współpracować jak próbujesz zrobić .

Zauważ, że zły skrypt, który nie został zaprojektowany do pracy z innymi nieznanymi skryptami, będzie zawsze w stanie rozbić stronę, na przykład przez zepsucie prototypów, zanieczyszczając globalny obszar nazw lub uszkadzając dom.

Answer 4

To może nie być popularna opcja, ale czasami skrypty w końcu jest rozprowadzany w różnych kawałków, w tym przypadku Znalazłem to za szybkie ustalenie

if(window.onload != null){var f1 = window.onload;} 
window.onload=function(){ 
    //do something 

    if(f1!=null){f1();} 
} 

potem gdzieś indziej. ..

if(window.onload != null){var f2 = window.onload;} 
window.onload=function(){ 
    //do something else 

    if(f2!=null){f2();} 
} 

to zaktualizuje funkcji onload i łańcuch ile potrzeba