Execute o código JavaScript após o carregamento da página da Web
-
Adicione a tag
script
no final da tagbody
em JavaScript -
Usando o evento
onload
em JavaScript -
Use o evento
onload
na tagbody
em JavaScript -
Use o evento
onload
no objetowindow
dentro de um arquivo JavaScript
Antes de executar qualquer código JavaScript, sempre temos que garantir que todos os elementos HTML sejam renderizados primeiro no navegador. Como nos referiremos a esses elementos HTML em nosso código JavaScript, esses elementos precisam ser carregados antes da página da web.
Escrever a tag script
dentro da tag head
não é uma boa ideia (isso só faz sentido quando você está carregando scripts de terceiros em seu código) porque o documento HTML é executado de cima para baixo e a tag head
é presente antes da tag body
. Então, ele será executado primeiro e depois a tag body
.
Uma vez que todo o conteúdo de nossa página da web está presente dentro da tag body
e a tag body
está presente após a tag head
, adicionar o código JavaScript dentro de head
não é necessário, pois não será capaz de encontrar os elementos HTML. Observe que até este ponto, os elementos ainda não foram criados.
Existem várias maneiras de carregar o JavaScript depois que todo o conteúdo da página da Web é completamente renderizado na tela. Abaixo estão algumas maneiras conhecidas que você pode seguir para executar o código JavaScript depois que a página da web estiver totalmente carregada.
Adicione a tag script
no final da tag body
em JavaScript
Adicionar uma tag script
no final da tag body
é um método comum de carregar o código JavaScript. Até este ponto, todo o conteúdo da página da Web é renderizado corretamente na tela. Portanto, podemos encontrar ou consultar facilmente esses elementos HTML dentro de nosso código JavaScript sem enfrentar nenhum erro no processo.
O programa a seguir mostra como isso é feito.
htmlCopy<body>
<script></script>
</body>
Usando o evento onload
em JavaScript
Outra maneira de executar o JavaScript após o carregamento da página é usando o método onload
. O método onload
espera até que a página seja carregada. Assim que o faz, esse processo executa o código JavaScript.
Existem duas maneiras de escrever um código JavaScript. Uma maneira é escrever o código JavaScript dentro da tag script
abaixo da tag body
e então chamar a função dentro do método onload
. Você também pode criar um arquivo separado para escrever o código JavaScript, vincular esse arquivo dentro de seu HTML no final da tag body
e, em seguida, chamar essa função dentro do método onload
.
Use o evento onload
na tag body
em JavaScript
O método onload
requer uma variável target
. Neste caso, estaremos usando o método onload
na tag body
para que seja o target
.
Dentro do método onload
, só temos que passar uma função. Agora, esta função só será executada depois que todo o conteúdo da página estiver totalmente carregado.
htmlCopy <body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
Produção:
textCopyfunction called...
Na tag body
, temos apenas uma tag h1
e uma tag script
. Na tag script
, temos uma função myFunction()
que imprime uma mensagem para a janela de console function called...
. Para executar esta função após o carregamento da página, basta passá-la dentro do método onload
.
Use o evento onload
no objeto window
dentro de um arquivo JavaScript
Outra maneira de usar o método onload
é no objeto window
. O objeto janela representa toda a janela do navegador. Depois que os elementos dentro da janela do navegador são completamente executados, podemos executar nosso código JavaScript usando o método onload
.
htmlCopy<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
Aqui, temos o mesmo código do anterior. A única diferença aqui é que estamos usando o método onload
no objeto window
, que agora é o alvo. O programa irá eventualmente chamar a função e a mensagem function called...
será impressa na janela do console.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn