Como chamo uma função JavaScript no carregamento da página?

244

Tradicionalmente, para chamar uma função JavaScript depois que a página é carregada, você adiciona um onloadatributo ao corpo que contém um pouco de JavaScript (geralmente apenas chamando uma função)

<body onload="foo()">

Quando a página for carregada, desejo executar algum código JavaScript para preencher dinamicamente partes da página com dados do servidor. Não posso usar o onloadatributo, pois estou usando fragmentos JSP, que não possuem nenhum bodyelemento ao qual eu possa adicionar um atributo.

Existe alguma outra maneira de chamar uma função JavaScript em carga? Prefiro não usar o jQuery, pois não estou muito familiarizado com ele.

javascript onload

— palAlaa
fonte

15

btw: é Javascript; Java sendo uma linguagem e Javascript outro. Não existe script Java. FYI

— Yanick Rochon

Você pode verificar se a edição de Kevin para sua pergunta ainda está fazendo a mesma pergunta ou reformulá-la para garantir que entendemos? (Você está tentando encontrar uma alternativa para onload?)

— STW

388

Se você deseja que o método onload use parâmetros, pode fazer algo semelhante a este:

window.onload = function() {
  yourFunction(param1, param2);
};

Isso liga o onload a uma função anônima que, quando invocada, executará a função desejada, com quaisquer parâmetros que você especificar. E, é claro, você pode executar mais de uma função de dentro da função anônima.

— Matt Sieker
fonte

E agora, quando incluo dinamicamente uma página gerada por servidor e preciso de preparação para DOM, preciso trabalhar nesse campo minado. Se ao menos alguém tivesse encorajado o usuário da biblioteca corretamente anteriormente.

— Stefan Kendall

4

Eu não disse que era uma boa ideia. Embora o desenvolvedor líder em que trabalho tenha um forte caso da síndrome de Not Invented Here, não tenha conseguido convencê-lo a usar o jquery, fora de algumas páginas.

— quer

2

Então talvez você deva trocar de emprego. Se a ferramenta certa para o trabalho não é a ferramenta que você está usando, por que bater sua cabeça contra a parede constantemente lutando contra os incompetentes?

— Stefan Kendall

E posso ligar para a mesma função segunda vez usando o botão onclick event on?

— Faizan

73

Outra maneira de fazer isso é usando ouvintes de eventos, aqui como você os usa:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

Explicação:

DOMContentLoaded Significa que quando os objetos DOM do documento são totalmente carregados e vistos por JavaScript, isso também pode ter sido "clique", "foco" ...

function () Função anônima, será invocada quando o evento ocorrer.

— Ahmed Jolani
fonte

5

Observe que isso não funcionará no IE 8 e inferior. Caso contrário, esta é a melhor solução JS pura!

— Philipp

46

Sua pergunta original não era clara, supondo que a edição / interpretação de Kevin esteja correta, então esta primeira opção não se aplica

As opções típicas estão usando o onloadevento:

<body onload="javascript:SomeFunction()">
....

Você também pode colocar seu javascript no final do corpo; ele não começará a ser executado até que o documento esteja completo.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

E, outras opções, é considerar o uso de uma estrutura JS que intrinsecamente faz isso:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
fonte

O javascript:no onloadé desnecessário, embora não prejudicial.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>givesUncaught ReferenceError: LoadResult is not defined

— Gunasegar 4/15

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Ou com jQuery, se você quiser:

$(function(){
   yourfunction();
});

Se você deseja chamar mais de uma função no carregamento da página, consulte este artigo para obter mais informações:

Usando várias funções de carga de JavaScript

— Sarfraz
fonte

3

Isso não está correto, a função executará e atribuirá o que retornar à carga. O () não deveria estar lá.

— epascarello 01/10/10

1

Se houver outras funções que estão ouvindo o evento onload, isso as expulsará. Melhor adicionar um ouvinte de evento em vez de atribuir um manipulador de eventos diretamente. Mesmo neste caso, você o atribuiria como `window.onload = yourfunction 'sem o fechamento da função, não da maneira que você a possui. Seu caminho procura executar sua função () no momento da atribuição.

— Robusto

que atribuirá o valor de retorno da função a window.onload, que não funcionará, a menos que o valor de retorno seja uma função.

— I.devries 01/10/10

@epascarello: Boa captura, fixa, você vê um hábito ao escrever nomes de funções. Obrigado

— Sarfraz

1

window.onload = sua função; O problema dessa maneira é que ele não aceita o parâmetro fucntion !!

— palAlaa

8

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

— anônimo
fonte

3

Eu acho que a resposta dele é clara, como você pode ver o script é colocado na tag head, permitindo que ele seja executado antes do conteúdo do corpo ... ou, digamos, pré-carregue suas funções ou o que for ... às vezes uma pessoa faz perguntas porque não faz ' você não sabe, mas nunca é o caso em que alguém o alimenta com colher, nem ninguém nesta comunidade, você precisa procurar um pouco mais as coisas. #

— special_that_you're_a_web_developer

8

Você precisa chamar a função que deseja que seja chamada no carregamento (ou seja, carregamento do documento / página). Por exemplo, a função que você deseja carregar quando o carregamento de documentos ou páginas é chamada "suaFunção". Isso pode ser feito chamando a função no evento de carregamento do documento. Por favor, veja o código abaixo para mais detalhes.

Experimente o código abaixo:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— Amir Md Amiruzzaman
fonte

6

aqui está o truque (funciona em qualquer lugar):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— Abhishek
fonte

1

Para detectar html carregado (do servidor) inserido no DOM, use MutationObserverou detecte momento em sua função loadContent quando os dados estiverem prontos para uso

Mostrar snippet de código

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

Expandir snippet

— Kamil Kiełczewski
fonte