Chamando Múltiplas Funções do Windows onload em JavaScript

07 de março de 2009 por Nikhil

Heres um outro pequeno pedaço de Javascript artifício que eu tive que cavar em volta porque a situação commaned-lo. Em um dos meus sites, eu tive esta situação onde eu tinha que implementar "windows.onload" duas vezes. A primeira coisa que veio à mente um inexperiente como o meu (eu tenho que dizer honestamente que, uma vez que tenho vindo a utilizar frameworks JavaScript e bibliotecas, tenho forgotton de fazer coisas simples no meu próprio ... triste mas é verdade), é o seguinte método ...

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

Desculpe dizer, mas, isto não vai funcionar ... não quero discutir a ciência execução de Javascript muito ... mas de acordo com a minha experiência recente, apenas a última função (onloadfn3) vai mal, na verdade, são executados.

Em situações normais, ao contrário de meu (que eu vou falar um pouco mais tarde) ... você poderia fazer um dos seguintes procedimentos para executar funções mutliple onload ....

Ou algo assim

 doOnLoad função () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Para a minha situação atual, eu não posso usar qualquer um dos acima ...
Por que eu preciso chamar windows.onload duas vezes, mas sim que chamar duas funções dentro de uma única função onload? Aqui é rápido olhar para a minha declaração de problema ...

"Meus As páginas do site são estruturados como o WordPress tema .... ou seja, há uma Header.php comum e footer.php que é incluído em todas as páginas do site. Há uma função implementaion onload no footer.php fazer algumas funções onload comuns. E existem algumas páginas que precisam de algo de sua própria onload, além daqueles feito pela função onload comum. Se eu atribuir a função de retorno de chamada directamente para o condutor Window, ele irá sobrepor-se as chamadas de retorno previamente designados no footer.php "

.... É o meu problema entendido :) ?

Bem! existem algumas soluções que eu encontrei. Todos eles são muito semelhantes e, principalmente, implementions de uma solução dada por Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solução:

Basta adicionar este código javascript para o site ...

 função addLoadEvent (func) {
     var oldonload = Window;
     if (typeof Window! = 'função') {
        window.onload = func
     } Else {
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 } 

E chamá-lo de vez do "windows.onload" usual

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Mais código para ser executado no carregamento da página *
 }); 

As vantagens deste trecho de código ...
1. Em primeiro lugar, ele permite que você tenha vários eventos windows.onload, chamados de partes separadas de seu código, sem overridding a definição anterior
2. É muito discreto. Ele pode ser colocado em um arquivo com os seus outros scripts ou em um arquivo separado.
3. Ele funciona mesmo se window.onload já foi definido.

Tags:


get ExpressingIT News by Email Inscrever-se para ExpressingIT por e-mail | Siga-me no Twitter


6 Responses to "Chamando Múltiplas Funções do Windows onload em javascript"

  1. Orren Smith Diz:

    zPDidP Boa Obrigado É muito lindamente,


  2. kleung11 Diz:

    Isso é muito limpo e funciona bem sem a necessidade de editar outras páginas. Obrigado!


  3. Wink diz:

    Funcionou maravilhosamente. Obrigado por compartilhar sua solução.


  4. Slava Diz:

    Solução fantástica!


  5. Desenvolvedor diz:

    Muito obrigado, isso me ajudar a resolver meu problema, depois de algumas noites com o sono para fora e uma dúzia de copos de café este post finalmente acertou o meu problema, muito obrigado!


  6. Elvis diz:

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


Deixe uma resposta

Inscrever-se para ExpressingIT RSS
get ExpressingIT News by Email Inscrever-se para ExpressingIT por E-mail
Siga-me no Twitter