Chamadas com várias funções do Windows onload em javascript

7 de março de 2009 por Nikhil

Heres outro pequeno pedaço de Javascript malandragem que eu tinha que cavar em volta, porque a situação commaned-lo. Em um dos meus sites, eu tive essa situação em que eu tive 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 para 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, isso 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 sobre um pouco mais tarde) ... você poderia fazer um dos seguintes procedimentos para executar funções mutliple onload ....

Ou algo assim

 função doOnLoad () {
         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, em vez que chamar duas funções dentro de uma única função onload? Aqui é rápido olhar para a minha declaração de problema ...

"Minhas 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 próprio onload, além daqueles feito pela função onload comum. Se eu atribuir função de retorno directamente para o condutor window.onload, ele irá sobrepor-se as chamadas de retorno previamente designados no footer.php "

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

Bem! há poucas 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.onload;
     if (typeof window.OnLoad! = 'função') {
        window.onload = func
     } Else {
        window.onload = function () {
            se (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. Primeiramente, 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 "chamadas com várias funções do Windows onload em javascript"

  1. Orren Smith Diz:

    zPDidP Bom Obrigado É muito lindamente,


  2. kleung11 Diz:

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


  3. Wink diz:

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


  4. Slava Diz:

    Solução fantástica!


  5. Desenvolvedor Diz:

    Muito obrigado, isso me ajudar a resolver o meu problema, depois de algumas noites de sono para fora e uma dúzia de copos de café este post finalmente pregado 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