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

07 de março de 2009 por Nikhil

Heres um outro pequeno pedaço de Javascript truques 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 começar realmente mal executado.

Em situações normais, ao contrário de mina (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

 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, 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 para 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.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 o código javascript para o site ...

 addLoadEvent função (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 em 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. É realmente 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 Boa Obrigado É muito bem,


  2. kleung11 Diz:

    Isto é 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 com o 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