Funções Javascript Como executar uma função no carregamento da página? Executando diversas funções em onload DOMContentLoaded e scripts

Se você já conhece mais ou menos JavaScript, provavelmente já ouviu falar sobre o manipulador de eventos Load, chamado onload. Este evento é disparado diretamente quando a página é carregada. E muitas vezes, quando a página carrega, alguma função deve ser executada. Mas e se você precisar executar várias funções JavaScript? Na verdade, essa pergunta foi feita por um dos usuários do site. Portanto, escreverei sobre o lançamento de diversas funções no onload neste artigo.

A solução é realmente trivial, basta executar uma função na qual todas as outras funções necessárias são lançadas:

função a() (
b()
c();
}
função b() (
alert("Função b() iniciada");
}
função c() (
alert("Função c() iniciada");
}

Se você abrir esta página (não existem coisas tão importantes como a tag html ou, por exemplo, o título e a codificação da página, para simplificar a compreensão do código), você verá como b() e c () funcionam quando a página é carregada.

Quero executar uma função quando a página for carregada, mas não quero usá-la no .

Eu tenho um script que é executado se eu inicializá-lo, por exemplo:

Função codeAddress() ( // código )

Mas quero rodar sem e tentei muitas coisas, por exemplo:

Window.onload = codeAddress;

Mas não funciona.

Então, como faço para acioná-lo no carregamento da página?

window.onload = function() ( ... etc. não é uma boa resposta.

Isso provavelmente funcionará, mas também interromperá quaisquer outras funções já vinculadas a este evento. Ou se outra função capturar esse evento depois da sua, ela será interrompida. Assim, você pode passar muitas horas tentando descobrir por que algo que funciona não existe mais.

Uma resposta mais confiável aqui:

If(window.attachEvent) ( window.attachEvent("onload", seuNomeFunção); ) else ( if(window.onload) ( var curronload = window.onload; var newonload = function(evt) ( curronload(evt); seuNomeFunção( evt); ); window.onload = newonload; ) else ( window.onload = seuNomeFunção; ) )

Alguns códigos que usei, esqueci onde encontrei para dar crédito ao autor.

Function my_function() ( // qualquer código que eu queira executar após o carregamento da página ) if (window.attachEvent) (window.attachEvent("onload", my_function);) else if (window.addEventListener) (window.addEventListener("load ", minha_função, falso);) else (document.addEventListener("carregar", minha_função, falso);)

Espero que isto ajude :)

Em vez de usar jQuery ou window.onload, o JavaScript nativo adotou alguns recursos excelentes desde o lançamento do jQuery. Todos os navegadores modernos agora têm sua própria função pronta para DOM sem usar a biblioteca jQuery.

Document.addEventListener("DOMContentLoaded", function() ( alert("Pronto!"); ), false);

janela.onload = codeAddress; deve funcionar - e o código completo é:

Função de teste codeAddress() ( alert("ok"); ) window.onload = codeAddress;

Função de teste codeAddress() ( alert("ok"); )

Dê uma olhada no script domReady, que permite configurar diversas funções para serem executadas quando o DOM for carregado. Isso é basicamente o que o Dom vem pronto para fazer em muitas bibliotecas JavaScript populares, mas é leve e pode ser adotado e adicionado no início do seu arquivo de script externo.

Exemplo de uso

// adiciona referência ao script domReady ou coloca // o conteúdo do script antes aqui function codeAddress() ( ) domReady(codeAddress);

Hoje quero falar sobre um problema que surge frequentemente entre as pessoas que começam a aprender Javascript.

Eles tentam interagir com elementos HTML na página que estão abaixo do código do próprio script. Assim, o script já foi carregado, mas o elemento com o qual você precisará interagir ainda não. Por esse motivo, nada funcionará.

A peculiaridade da linguagem Javascript é que seu código é executado sequencialmente, linha por linha, conforme estão escritos no código-fonte.

Aqui está um exemplo:

Documento sem título

A regra css (background-color:yellow) não será aplicada ao elemento com id #block, pois linha

$("#block").css("cor de fundo", "amarelo");

Será executado antes que a linha HTML seja carregada:

E se precisarmos executar código ou função somente depois que todo o documento for completamente carregado?

Quero falar sobre três maneiras de fazer isso.

1 maneira. Usando a biblioteca Jquery.

Na maioria das vezes eu mesmo uso, é a solução mais simples e conveniente, mas requer a conexão da biblioteca Jquery.

Veja como o código anterior será transformado se usarmos o método a seguir.

#block (largura: 100px; altura: 100px; borda: 1px sólido #ccc;) $(document).ready (function())( $("#block").css("cor de fundo", "amarelo" ) ; )); Documento sem título

Método 2. Usando o elemento body e o atributo onload.

#block (width:100px; height:100px; border:1px solid #ccc;) function funonload() ( $("#block").css("background-color", "yellow"); ) Documento sem título

3 vias. Usando o objeto window e sua propriedade onload.

#block (largura: 100px; altura: 100px; borda: 1px sólido #ccc;) função funonload() ( $("#block").css("background-color", "yellow"); ) window.onload = funonload; Documento sem título

Escolha o método que melhor se adapta à sua situação e coloque-o em prática.