Como executar uma função quando a página é carregada?

246

Quero executar uma função quando a página é carregada, mas não quero usá-la na <body>tag.

Eu tenho um script que é executado se eu inicializá-lo no <body>, assim:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Mas eu quero executá-lo sem o <body onload="codeAddress()">e tentei muitas coisas, por exemplo:

window.onload = codeAddress;

Mas isto não está funcionando.

Então, como eu o executo quando a página é carregada?

javascript html onload Claes Gustavsson
fonte

Você está correndo window.onload = codeAddressatrás codeAddress()é definido? Se assim for, isso deve funcionar. Tem certeza de que não há um erro em outro lugar?

Skilldrick

Isso não faz sentido. window.onload é executado após o carregamento da página e todo o javascript está disponível, portanto, a função codeAddress () pode ser declarada em qualquer lugar da página ou nos arquivos js vinculados. Ele não precisa vir antes, a menos que tenha sido chamado durante o carregamento da página.

Jared Farrish

@ Jared Sim, sim. Dê uma olhada em jsfiddle.net/HZHmc . Isso não funciona. Mas se você mover o window.onload para após a definição: jsfiddle.net/HZHmc/1, ele funcionará.

Skilldrick

Uma declaração de função geralmente é elevada para a parte superior do escopo, para que a função possa ser declarada em qualquer lugar em um escopo acessível.

Russ Cam

4

todos os navegadores populares podem exibir erros de javascript - você obtém algum?

Christoph

354

window.onload = codeAddress;deve funcionar - aqui está uma demonstração e o código completo:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

Expandir snippet

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

Expandir snippet

Darin Dimitrov
fonte

3

Como eu disse na minha resposta, não há nada errado com o código como visto - a razão pela qual ele não está funcionando deve ser um erro no JS em algum lugar.

Skilldrick

se você colocar um parágrafo com texto no corpo, ele não será carregado até você clicar em ok.

FluorescentGreen5

Este manipulador de eventos global está disponível apenas no Chrome. developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/…

Devolvido

177

Em vez de usar jQuery ou window.onload, o JavaScript nativo adotou algumas ótimas funções desde o lançamento do jQuery. Todos os navegadores modernos agora têm sua própria função pronta para DOM sem o uso de uma biblioteca jQuery.

Eu recomendo isso se você usar Javascript nativo.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

Spencer May
fonte

4

(pergunta de noob: o que o falsefaria?)

ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊ para a propriedade 'bubbles' (que você não precisa incluir, basta preencher todos os booleanos por bom hábito). Também há outra instrução booleana para a propriedade 'cancelable', mas não é muito útil, pois a instrução acima já é cancelável. Leia mais sobre isso aqui: developer.mozilla.org/pt-BR/docs/Web/Events/DOMContentLoaded

Spencer May

1

Era isso que eu estava procurando agora :) Executa quando o DOM está completo, para que você possa manipulá-lo, não quando o navegador diz "página completamente carregada", o que pode levar alguns segundos, com base em informações externas (como anúncios)

Nathanyel

Pergunta ligeiramente noob, e se você não souber se a página está carregada ou não? Edit: Ah: document.readyState

Brian Hannay

1

@ x-yuri "O evento DOMContentLoaded é acionado quando o documento é completamente carregado e analisado, sem esperar pelas folhas de estilo, imagens e sub-quadros para concluir o carregamento (o evento load pode ser usado para detectar uma página totalmente carregada)." # stackoverflow.com/questions/2414750/…

Spencer Mai

46

Tomando a resposta de Darin, mas no estilo jQuery. (Eu sei que o usuário pediu javascript).

violino em execução

$(document).ready ( function(){
   alert('ok');
});

Comer no Joes
fonte

4

Sua resposta me ensinou a colocar tudo, mas não sobre jQuery / javascript.

unicorn2

2

@VijayKumar este é jQuery, Javascript não nativo para que você precisa de uma biblioteca jQuery incluído para que ele funcione

Spencer Maio

30

Solução alternativa. Eu prefiro isso pela brevidade e simplicidade do código.

(function () {
    alert("I am here");
})();

Esta é uma função anônima, onde o nome não é especificado. O que acontece aqui é que, a função é definida e executada em conjunto. Adicione isso ao início ou ao fim do corpo, dependendo se deve ser executado antes de carregar a página ou logo após o carregamento de todos os elementos HTML.

Habeeb
fonte

1

Este é o único código que funciona com a Visualização HTML do GitHub: htmlpreview.github.io Outro código, enquanto correto, está arruinado por esta Visualização HTML.

Jason Doucette

1

Alguém pode explicar como isso é diferente de colocar as tags de script no final da página HTML e o objetivo da função anônima?

Pat-Laugh

10

window.onload = function() { ... etc. não é uma ótima resposta.

Provavelmente isso funcionará, mas também interromperá outras funções já conectadas a esse evento. Ou, se outra função se conectar a esse evento após o seu, ele quebrará o seu. Assim, você pode passar muitas horas depois tentando descobrir por que algo que estava funcionando não está mais.

Uma resposta mais robusta aqui:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Algum código que estou usando, esqueço onde o achei para dar crédito ao autor.

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

Espero que isto ajude :)

Vai
fonte

Obrigado por fornecer esclarecimentos adicionais sobre o onloaduso

Cybex

4

Tente readystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

onde os estados são:

loading - o documento está carregando (não foi disparado no snippet)
interativo - o documento é analisado, disparado antesDOMContentLoaded
completo - o documento e os recursos são carregados, disparados anteswindow.onload

Mostrar snippet de código

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Expandir snippet

Kamil Kiełczewski
fonte

3

Dê uma olhada no script domReady que permite a configuração de várias funções para executar quando o DOM for carregado. É basicamente o que o Dom ready faz em muitas bibliotecas JavaScript populares, mas é leve e pode ser obtido e adicionado no início do seu arquivo de script externo.

Exemplo de uso

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

Russ Cam
fonte

0

window.onload funcionará assim:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

Expandir snippet

Rudra
fonte

Como executar uma função quando a página é carregada?

Respostas: