Execute o código JavaScript após o carregamento da página da Web

  2. HowTo
  3. JavaScript Howtos
  4. Execute o código JavaScript após o …
Sahil Bhosale 18 outubro 2021
JavaScript JavaScript Onload
  1. Adicione a tag script no final da tag body em JavaScript
  2. Usando o evento onload em JavaScript
  3. Use o evento onload na tag body em JavaScript
  4. Use o evento onload no objeto window dentro de um arquivo JavaScript
Execute o código JavaScript após o carregamento da página da Web

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.

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

   <body onload="myFunction()">
     <h1>This is an example of onload.</h1>
     <script>
   
       function myFunction() {
         console.log("function called...");
       }
   
     </script>
   </body>

Produção:

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

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

Autor: Sahil Bhosale
Sahil Bhosale avatar Sahil Bhosale avatar

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