Adicione vários eventos window.onload

Question

No meu controle de usuário ASP.NET estou adicionando um pouco de JavaScript ao window.onload evento:

if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), onloadScriptName))
  Page.ClientScript.RegisterStartupScript(this.GetType(), onloadScriptName, 
    "window.onload = function() {myFunction();};", true);            

Meu problema é que, se já existe algo no onload evento, então isso o substitui.Como eu permitiria que dois controles de usuário executassem JavaScript no onload evento?

Editar: Obrigado pelas informações sobre bibliotecas de terceiros.Vou mantê-los em mente.

Answer 1

A maioria das "soluções" sugeridas são específicas da Microsoft ou requerem bibliotecas inchadas.Aqui está uma boa maneira.Isso funciona com navegadores compatíveis com W3C e com Microsoft IE.

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

Answer 2

Ainda existe uma solução feia (que é muito inferior ao uso de um framework ou addEventListener/attachEvent) que é para salvar o atual onload evento:

function addOnLoad(fn)
{ 
   var old = window.onload;
   window.onload = function()
   {
       old();
       fn();
   };
}

addOnLoad(function()
{
   // your code here
});
addOnLoad(function()
{
   // your code here
});
addOnLoad(function()
{
   // your code here
});

Observe que estruturas como jQuery fornecerão uma maneira de executar código quando o DOM estiver pronto e não quando a página for carregada.

O DOM estar pronto significa que seu HTML foi carregado, mas não componentes externos, como imagens ou folhas de estilo, permitindo que você seja chamado muito antes do evento de carregamento ser acionado.

Answer 3

Eu tive um problema semelhante hoje, então resolvi com um index.js com o seguinte:

window.onloadFuncs = [];

window.onload = function()
{
 for(var i in this.onloadFuncs)
 {
  this.onloadFuncs[i]();
 }
}

e em arquivos js adicionais que desejo anexar o evento onload, só preciso fazer o seguinte:

window.onloadFuncs.push(function(){
 // code here
});

Eu normalmente uso jQuery, mas desta vez fiquei restrito a js puro, o que me forçou a usar minha mente por um tempo!

Answer 4

Mootools é outro ótimo framework JavaScript que é bastante fácil de usar e, como RedWolves disse com jQuery você pode simplesmente continuar jogando quantos manipuladores quiser.

Para cada arquivo *.js que incluo, apenas envolvo o código em uma função.

window.addEvent('domready', function(){
    alert('Just put all your code here');
});

E também há vantagens de usar domready em vez de onload

Answer 5

Experimente isto:

window.attachEvent("onload", myOtherFunctionToCall);

function myOtherFunctionToCall() {
    // do something
}

editar:ei, eu estava me preparando para fazer login no Firefox e reformatar isso sozinho!Ainda não parece formatar o código para mim com o IE7.

Answer 6

Não sei muito sobre ASP.NET, mas por que não escrever uma função personalizada para o evento onload que, por sua vez, chama ambas as funções para você?Se você tiver duas funções, chame ambas a partir de um terceiro script que você registrou para o evento.

Answer 7

Você já pensou em usar algo como JQuery que fornece uma estrutura para limpar a adição de vários manipuladores de eventos?

Answer 8

Na verdade, de acordo com esta página do MSDN, parece que você pode chame essa função várias vezes para registrar vários scripts.Você só precisa usar chaves diferentes (o segundo argumento).

Page.ClientScript.RegisterStartupScript(
    this.GetType(), key1, function1, true);

Page.ClientScript.RegisterStartupScript(
    this.GetType(), key2, function2, true);

Eu acredito que isso deveria funcionar.

Answer 9

Eu sei que isso foi respondido, mas só quero que você saiba sobre esta função:

http://phrogz.net/JS/AttachEvent_js.txt

cumprimentos T

Answer 10

Você pode fazer isso com jquery

$(window).load(function () {
    // jQuery functions to initialize after the page has loaded.
});