Trucades Múltiples Funcions de Windows onload en JavaScript

7 març 2009 per Nikhil

Heres un altre petit tros de Javascript engany que havia de cavar al voltant perquè la situació commaned ella. En un dels meus llocs web, vaig tenir aquesta situació en què vaig haver de posar en pràctica "windows.onload" dues vegades. La primera cosa que va venir a la ment sense experiència com la meva (que he de dir honestament que, ja que he estat utilitzant frameworks de JavaScript i les biblioteques, he forgotton per fer coses simples pel meu compte ... trist però cert), és el següent mètode ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 etc ...

Lamento dir-ho, però, això no funcionarà ... No vull parlar de la ciència execució de Javascript molt ... però d'acord a la meva experiència recent, només l'última funció (onloadfn3) es malalta realment s'executen.

En situacions normals, a diferència de la meva (que vaig a parlar una mica més tard) ... es pot fer una de les següents accions per executar mutliple funcions onload ....

O alguna cosa com això

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Per la meva situació actual, no puc utilitzar qualsevol dels anteriors ...
Per què he de trucar windows.onload dues vegades, en lloc de de trucar dues funcions dins d'una única funció onload? Aquí és ràpid cop d'ull al meu declaració del problema ...

"Les meves pàgines del teu portal s'estructuren com el tema de WordPress .... és a dir, hi ha una header.php i footer.php comú que vagi a incloure en totes les pàgines del lloc. Hi ha una funció de implementaion onload al footer.php fer algunes funcions onload comuns. I hi ha poques pàgines que necessiten una mica de la seva pròpia onload, a part de les realitzades per la funció onload comú. Si assigno la funció de devolució de trucada directament al controlador window.onload, serà passar per sobre de les devolucions de trucada assignats prèviament al footer.php "

.... S'entén el meu problema :) ?

Bé! hi ha poques solucions que he trobat. Tots ells són molt similars i principalment implementions d'una solució donada per Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solució:

Només has d'afegir aquest codi javascript lloc ...

 addLoadEvent funció (func) {
     var oldonload = window.onload;
     si (typeof window.onload! = "funció") {
        window.onload = func
     } Else {
        window.onload = function () {
            si (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 } 

I en diuen en lloc de la "windows.onload" habitual

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Més la execució de codi a la pàgina de càrrega *
 }); 

Els avantatges d'aquest fragment de codi ...
1. En primer lloc, se li permet tenir múltiples esdeveniments windows.onload, cridats a partir de peces separades del seu codi, sense overridding la definició anterior
2. És molt discret. Es pot col·locar en un arxiu amb les seves altres seqüències d'ordres o en un arxiu separat.
3. Funciona fins i tot si window.onload ja s'ha establert.

Etiquetes:


get ExpressingIT News by Email Subscriu-te a ExpressingIT per Email | Segueix-me a Twitter


6 Respostes a "Calling múltiples funcions de Windows onload en javascript"

  1. Orren Smith diu:

    zPDidP Bé Gràcies És molt bonic,


  2. kleung11 diu:

    Això és molt net i funciona bé sense necessitat d'editar altres pàgines. Gràcies!


  3. Ullet diu:

    Va treballar meravellosament. Gràcies per compartir la seva solució vostè.


  4. Slava diu:

    Solució fantàstica!


  5. Desenvolupador diu:

    Moltes gràcies, això m'ajudi a resoldre el meu problema, després d'algunes nits de son a terme i una dotzena de gots de cafè aquest post finalment clavat el meu problema, moltes gràcies!


  6. Elvis diu:

    window.addEventListener ('càrrega', function () {alert ()});


Deixa un comentari

Subscriu-te a ExpressingIT RSS
get ExpressingIT News by Email Subscriu-te a ExpressingIT per Email
Segueix-me a Twitter