aggiungendo all’evento window.onload?

Mi chiedo come aggiungere un’altra chiamata di metodo all’evento window.onload dopo che è già stata assegnata una chiamata al metodo.

Supponiamo che da qualche parte nella sceneggiatura io abbia questo incarico …

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

e poi più avanti nella sceneggiatura ho questo incarico

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

Così com’è, verranno chiamati solo some_methods_2 . C’è un modo per aggiungere alla some_methods_1 . some_methods_1 callback senza cancellare some_methods_1 ? (e anche senza includere sia some_methods_1() che some_methods_2() nello stesso blocco funzione).

Immagino che questa domanda non riguardi veramente window.onload ma una domanda su javascript in generale. NON voglio assegnare qualcosa a window.onload in modo tale che se un altro sviluppatore dovesse lavorare sullo script e aggiungere un pezzo di codice che usi anche window.onload (senza guardare il mio codice precedente), vorrebbe disabilita il mio evento onload.

Mi sto anche chiedendo la stessa cosa

  $(document).ready() 

in jQuery. Come posso aggiungerlo senza distruggere ciò che è venuto prima o ciò che potrebbe venire dopo?

Se stai usando jQuery, non devi fare nulla di speciale. I gestori aggiunti tramite $(document).ready() non si sovrascrivono a vicenda, ma eseguono piuttosto a turno:

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

Se non si utilizza jQuery, è ansible utilizzare addEventListener , come dimostrato da Karaxuna, più attachEvent per IE <9.

Si noti che onload non è equivalente a $(document).ready() – il primo attende CSS, immagini …, mentre il secondo attende solo l’albero DOM. I browser moderni (e IE da IE9) supportano l’evento DOMContentLoaded sul documento, che corrisponde all’evento jQuery ready , ma IE <9 no.

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

Se nessuna delle due opzioni è disponibile (ad esempio, non hai a che fare con i nodes DOM), puoi ancora farlo (sto usando onload come esempio, ma sono disponibili altre opzioni per il carico):

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

o, per evitare di inquinare lo spazio dei nomi globale (e probabilmente incontrando le collisioni nello spazio dei nomi), utilizzando il modello di importazione / esportazione IIFE:

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

È ansible utilizzare invece attachEvent (ie8) e addEventListener

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

Ci sono fondamentalmente due modi

  1. memorizza il valore precedente di window.onload modo che il tuo codice possa chiamare un gestore precedente se presente prima o dopo l’esecuzione del codice

  2. usando l’approccio addEventListener (che ovviamente a Microsoft non piace e richiede l’utilizzo di un altro nome diverso).

Il secondo metodo ti darà un po ‘più di sicurezza se un altro script vuole usare window.onload e lo fa senza pensare alla cooperazione, ma l’ipotesi principale per Javascript è che tutti gli script coopereranno come tu stai cercando di fare.

Si noti che uno script non progettato per funzionare con altri script sconosciuti sarà sempre in grado di interrompere una pagina, ad esempio facendo confusione con i prototipi, contaminando lo spazio dei nomi globale o danneggiando la dom.

Questa potrebbe non essere un’opzione popolare, ma a volte gli script finiscono per essere distribuiti in vari blocchi, in questo caso ho trovato che questa è una soluzione rapida

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

poi da qualche altra parte …

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

questo aggiornerà la funzione onload e la catena secondo necessità