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 seu voltant, perquè la situació commaned ella. En un dels meus llocs web, he tingut 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 (he de dir amb tota sinceritat que, des 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 ..

Sento 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) ... que podria fer un el següent per executar funcions onload mutliple ....

O alguna cosa com això

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

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

"Els meus pàgines del lloc estan estructurats 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 dels realitzats per la funció onload comú. Si assigno funció callback directament al controlador d'window.onload, serà d'anul · lació assignat prèviament devolucions de trucada en el footer.php "

.... S'entén 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ó (funció) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'function') {
        window.onload = func
     } Else {
        window.onload = function () {
            si (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 } 

I crida a ella en lloc de la "windows.onload" usual

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Més codi per funcionar 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 discreta. Es pot col · locar en un arxiu amb les seves altres escriptures o en un arxiu separat.
3. Funciona fins i tot si window.onload ja s'ha establert.

Etiquetes:


get ExpressingIT News by Email Rep les ExpressingIT per email | Segueix-me a Twitter


6 Responses to "Trucar a diverses funcions de Windows onload en JavaScript"

  1. Orren Smith diu:

    zPDidP Bé Gràcies És molt bonic,


  2. kleung11 Says:

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


  3. Wink diu:

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


  4. Slava Says:

    Solució Fantastic!


  5. Desenvolupador diu:

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


  6. Elvis diu:

    window.addEventListener ('load', function () {alert ()});


Deixa un comentari

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