contenuto principale:

aggiungere funzioni a window.onload
(martedì 04 marzo 2008)

come ben spiegato nel post Executing JavaScript on page load scritto da Simon Willison, è molto utile avere una funzione che permetta di appendere, alla coda degli eventi da eseguire alla fine del caricamento della pagina, delle funzioni evitando di cancellare la coda eventualmente già popolata;

una funzione di questo tipo, a mio avviso, dovrebbe essere sempre presente nella libreria javascript di qualunque sito;

il funzionamento è molto semplice in quanto controlla se la coda sia già popolata e, in questo caso, vi appende la nuova funzione, altrimenti semplicemente inizia la coda :

/**
 * appende in coda la funzione da eseguire alla conclusione
 * del caricamento della pagina (politica FIFO);
 *
 * @param Function Object f funzione da appendere in coda
 * @return void
 */
function addLoadEvent(f) {
    if (typeof window.onload == 'function') {
        var old = window.onload;
        window.onload = function() {
            old();
            f();
        }
    } else {
        window.onload = f;
    }
}

per utilizzarla è sufficiente richiamarla passandogli come argomento una funzione precedentemente dichiarata (nb: la funzione, non la stringa col suo nome) :

//funzione dichiarata precedentemente
function testOnLoad() {
    alert('funzione dichiarata precedentemente');
}

//appende la funzione (nb: non la stringa col suo nome)
addLoadEvent(testOnLoad);

oppure dichiarandola direttamente nella chiamata (funzione anonima) :

//appende una funzione anonima
addLoadEvent(function() {alert('funzione anonima');});

da notare che è implementata una politica FIFO tipica delle code, ma se fosse necessaria una politica LIFO tipica delle pile è sufficiente invertire l'ordine in cui sono richiamate le due funzioni "f();" ed "old();" :

/**
 * inserisce in testa la funzione da eseguire alla conclusione
 * del caricamento della pagina (politica LIFO);
 *
 * @param Function Object f funzione da inserire in testa
 * @return void
 */
function addLoadEventLifo(f) {
    if (typeof window.onload == 'function') {
        var old = window.onload;
        window.onload = function() {
            //ordine invertito per implementare una politica LIFO
            f();
            old();
        }
    } else {
        window.onload = f;
    }
}

ovviamente l'utilizzo della funzione LIFO non differisce minimamente da quella FIFO;

infine, bisogna tenere presente l'ambito in cui questa funzione opera: l'evento onload dell'oggetto window viene attivato, appunto, al completo caricamento della pagina; questo significa che le funzioni definite in window.onload verranno eseguite solo quando tutti i contenuti saranno completamente caricati (incluse immagini, filmati flash, video, iframe, etc ...) che, ovviamente, raramente coincide col semplice caricamento dell'HTML e del relativo DOM;

quindi, per avere realmente a disposizione le nostre "belle e brave" funzioni appena queste possano essere utilizzate, è necessario ricorrere ad altri metodi (come il DOMContentLoaded di Andrea Giammarchi), tenendo comunque presente il rischio di una non completa compatibilità coi browser più datati;

MwR

se volessi argomentare, discutere o correggere questo appunto puoi utilizzare il form del sito, possibilmente indicando il consenso ed una dicitura per il credit nel caso decidessi di pubblicare il tuo intervento;