it-swarm-pt.tech

Melhor prática para usar o window.onload

Eu desenvolvo sites/componentes/módulos e plugins do Joomla e de vez em quando eu preciso da habilidade de usar JavaScript que aciona um evento quando a página é carregada. Na maioria das vezes isso é feito usando a função window.onload.

Minha pergunta é:  

  1. Essa é a melhor maneira de acionar eventos JavaScript no carregamento da página ou há uma maneira melhor/mais recente?
  2. Se esta é a única maneira de acionar um evento no carregamento da página, qual é a melhor maneira de garantir que vários eventos possam ser executados por diferentes scripts?
37
privateace

window.onload = function(){}; funciona, mas como você deve ter notado, ele permite que você especifique apenas 1 ouvinte .

Eu diria que a melhor/mais recente maneira de fazer isso seria usar um framework, ou simplesmente usar uma implementação simples dos métodos nativo addEventListener e attachEvent (para IE), que permite a você remove os ouvintes dos eventos também.

Aqui está uma implementação entre navegadores:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

Para o uso do caso window.onload: listen("load", window, function() { });


EDITGostaria de expandir minha resposta adicionando informações preciosas que foram apontadas por outras pessoas.

Isto é sobre oDOMContentLoaded(nightlies Mozilla, Opera e webkit atualmente suportam isto) eonreadystatechange(para IE) events que pode ser aplicado ao document object para entender quando o documento está disponível para ser manipulado (sem esperar que todas as imagens/folhas de estilo etc. sejam carregadas).

Existem muitas implementações "hacky" para suporte a vários navegadores, por isso sugiro usar uma estrutura para esse recurso.

44
Luca Matteis

Os frameworks javascript modernos introduziram a ideia de um evento "documento pronto". Este é um evento que será disparado quando o documento estiver pronto para que as manipulações de DOM sejam executadas nele. O evento "onload" é ​​acionado somente após TUDO na página ter sido carregado.

Juntamente com o evento "documento pronto", as estruturas forneceram uma maneira de enfileirar vários bits de código e funções JavaScript para serem executados quando o evento é disparado. 

Portanto, se você se opuser aos frameworks, a melhor maneira de fazer isso é implementar sua própria fila de documentos.onload.

Se você não se opõe a frameworks, então você vai querer olhar para jQuery e document.ready , Prototype e dom: loaded , Dojo e addOnLoad ou Google para [seu framework ] e "documento pronto".

Se você não escolheu um framework, mas está interessado, o jQuery é um bom lugar para começar. Ele não altera nenhuma das principais funcionalidades do JavaScript, e geralmente fica fora do seu caminho e permite que você faça as coisas que quiser quando quiser. 

10
Alan Storm

Os eventos window.onload são substituídos em várias criações. Para acrescentar funções, use o Window.addEventListener (padrão W3C) ou o window.attachEvent (para o IE). Use o seguinte código que funcionou. 

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}
10
Devaroop

O Joomla vem com o MooTools, então você achará mais fácil usar a biblioteca do MooTools para seu código adicional. O MooTools é enviado com um evento personalizado chamado domready que é acionado quando a página é carregada e a árvore de documentos é analisada.

window.addEvent( domready, function() { code to execute on load here } );

Mais informações sobre o MooTools podem ser encontradas aqui . O Joomla 1.5 atualmente vem com o MT1.1, enquanto o Joomla 1.6 alpha incluirá o MT1.2

2
Arlen

Pessoalmente, eu prefiro este método . Não só permite que você tenha várias funções onload, mas se algum script o definiu before você chegou lá, este método é legal o suficiente para lidar com isso ... O único problema que resta é se uma página carrega vários scripts que não usam a função window.addLoad(); mas esse é o problema deles :).

P.S. Também é ótimo se você quiser "encadear" mais funções posteriormente.

1
Mike

Este é o caminho sujo, mas mais curto: P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )
1
Aamir Afridi

Como sempre incluo arquivos jQuery/bootstrap JS na parte inferior do documento e não tenho acesso a $ sobre o documento, desenvolvi um pequeno plug-in "init" que é um e apenas script JS que incluo no topo das minhas páginas:

window.init = new function() {
    var list = [];

    this.Push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.Push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.Push(window.onload);
        }
        window.onload = this.run;
    }
};

Usando isso eu posso definir qualquer carregador anônimo sobre a página, antes da inclusão do jQuery e do bootstrap e ter certeza de que ele irá disparar assim que o jQuery estiver presente:

init.Push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});
0
yergo