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