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, he tingut aquesta situació en la que havia de posar en pràctica "windows.onload" dues vegades. El primer que va arribar a la seva ment sense experiència com la meva (que he de dir honestament que, des que he estat utilitzant frameworks de JavaScript i les biblioteques, he forgotton fer les 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ò, aquest 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 mutliple funcions onload ....

O alguna cosa com això

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

Per la meva situació actual, no puc fer servir qualsevol dels anteriors ...
Per què vaig haver 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 ...

"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 comunes. 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 de 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 cal afegir el codi javascript per lloc ...

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

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

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

Els avantatges d'aquest fragment de codi ...
1. Principalment, li permet disposar de 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 els seus altres scripts 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 Responses to "Trucant 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:

    Funcionat de meravella. 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 ('load', 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