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

7 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 em que eu tinha de 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 um pouco mais tarde) ... você pode fazer uma das seguintes opções para executar funções onload mutliple ....

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 ...

"Minhas páginas do site são estruturados como o WordPress tema .... ou seja, há um 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 há poucas 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-callbacks anteriormente atribuído na 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 ...

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

E chamá-lo em vez do "windows.onload" habitual

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

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

Etiquetas:


get ExpressingIT News by Email Assinar ExpressingIT por Email | 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 Says:

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


  3. Wink diz:

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


  4. Slava Says:

    Solução Fantastic!


  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 disse:

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


Deixe uma resposta

Assinar ExpressingIT RSS
get ExpressingIT News by Email Assinar ExpressingIT por Email
Siga-me no Twitter