Palavras-chave: DEFER, onLoad, body, carregamento
O problema é clássico. Você tem uma função/método e deseja que ele seja chamado apenas após o carregamento da página pois esse script interage com algum elemento da página que precisa estar completamente renderizado para poder ser manipulado. Vejamos o exemplo a seguir que muda um objeto do tipo input text para apenas leitura:
<html>
<head>
<script type="text/javascript">
function setDisabled() {
document.getElementById("foo").disabled = true;
}
// Chamada da função
setDisabled();
</script>
</head>
<body>
<form method="post">
<input type="text" name="foo" id="foo" size="20">
<input type="submit">
</form>
</body>
</html>
Inicialmente esse exemplo deveria ser o suficiente para funcionar. Contudo, não podemos considerar que toda a página será carregada de uma única vez. Caso isso aconteça, quando a função for chamada campo o input pode não ter sido carregado. Resultado: você terá um erro de script.
Existem várias saídas para esse tipo de situação. A mais conhecida é incluir a chamada da função pelo método onLoad da tag body ao invés de executá-lo dentro do bloco <script>:
<body onLoad="setDisabled()">
Mas pode não ser suficiente caso você tenha muitos mais funções a serem chamadas. Outra saída seria incluir o bloco <script> no final do código, mas isso foge um pouco do padrão do W3C de incluir todos os <scripts> entre as tags <head>. A saída para esse problema é a utilização de um atributo pouco conhecido da tag <script>, o DEFER.
O DEFER indica que o bloco script só será carregado após todo o carregamento da página. Dessa forma, para que o primeiro exemplo apresentado funcione bastaria alterá-lo para incluir o atributo:
<script type="text/javascript" DEFER="DEFER">
function setDisabled() {
document.getElementById("foo").disabled = true;
}
// Chamada da função
setDisabled();
</script>
Fiquei curioso: que padrão do W3C recomenda incluir os scripts entre as tags head?
Isso se deve ao fato que após o o HTML deveria de ser apenas um arquivo XML por milhares de razões.
…. entre dos dois “ós” do comentário, existia uma tag [body].
Se ta com vontade de ensinar cria um blog pra você e para de encher no dos outros…
Bastante interessante isso e muito melhor que colocar a definição do script no final da página. Principalmente se você costuma separar o Java Script do código.
Olá Eduardo.
Pelo menos é o que eu entendi até hoje. Pelo que pude ler na especificação do HTML 4.01, o W3C recomenda que, caso seja necessário incluir tags <SCRIPT> que elas sejam incluídas como nodos filhos do HEAD.
http://www.w3.org/TR/html401/struct/global.html#h-7.4
Não consegui encontrar na especificação onde está a recomendação de que os scripts estejam no head e não no body.
Vi que o body também pode ter tags script dentro dele (http://www.w3.org/TR/html401/struct/global.html#h-7.5.1). Só não encontrei nada que recomendasse usar o head e não o body, ou que comparasse as duas possibilidades.
Cara se você não tem o que fazer, então não enche o saco, quem é você para querer criticar?
MUITO AJUDA QUEM NÃO ATRAPALHA!
rs,
de acordo..
o pessoal viaja feio..
Resposta de 2007 e 2012, você usou o delorean?
Sobre o comentário do “Eduardo Habkost” eu só vi uma critica construtiva, não tem nada de maldade nisso.
ps.: defer não é a melhor pratica atualmente, existem técnicas melhores.
Velho todo mundo que tem um pingo de bom senso, sabe que deve ser assim, mas os gambiarreros diram que não tem nada a ver…
Se vc colocar o script dentro da head, é executado antes de carregar a pág, e se colocar na body executa durante o carregamento, fica a seu critério e necessidade.
Muito boa esta dica!!
Pessoal,
não é mais recomendado utilizar o atributo onload da tag body. Para realmente funcionar, façam assim (em qualquer lugar da página).
window.onload = function () {
nomeDaFuncao1();
nomeDaFuncao2();
nomeDaFuncao3();
}
Ow, se quiser melhorar mais ainda utilizar a função addEvent (http://www.metzen.com.br/freedom/):
addEvent(window, “load”, “nomeDaFuncao1”);
addEvent(window, “load”, “nomeDaFuncao2”);
addEvent(window, “load”, “nomeDaFuncao3”);
E lembre-se, todos os nomes de atributos de tags devem ser escritos em minúsculo:
onClick = ERRADO
onclick = CORRETO
Abraços,
deu certo, com o comando nativo javascript indicado
window.onload = function () {
atualiza_calculos();
}
Estava usando o jquery, talvez por não conhecer a opção para fazer algo no jquery
// DOM READY
$(function() {
atualiza_calculos();
}
Obrigado.
Bem não conhecia o atributo….
Teste aqui e não funcionou….. nem no IE nem no FF
Alguém ae testou ????
Não tenho certeza, mas esse atributo não funciona no FF nem no Opera.
O Dreamweaver ‘conhece’ o atributo, mas parece que não funciona não…
Tentei usar no meu problema mas não mudou nada…
Depois farei uns testes isolados pra ver qual é a dessa defer…
Testei e não funcionou no FF.
Esse atributo (infelizmente) só funciona no Internet ExploDer!.. Digo.. não funciona no FF… e acho q no Safari também não.
Há poucos dei uma pesquisada na internet… Tem até uma página que verifica, mostrando a ordem de execução com scripts em vários locais.
Abraço!
Olá! Obrigado! Funcionou aqui, nos IE’s antigos! Obrigado!
simples e funcional,
resolveu numa boa. Como o problema era só no ie mesmo, resolveu
grato
Olá a todos, estou com o seguinte problema:
Tenho um function teste(texto)
{alert(texto);return true;} dentro de uma arquivo carregado
na página via ajax, no fim desse mesmo arquivo eu tenho AQUI mas isso não funciona. Ao clicar
da o seguinte erro (firebug) “teste is not defined”, isso é evidente,
o objeto chamado não existe, so funciona se eu colocar no ,
existe solução para isso? ou seja, é possível manter um
dentro de um arquivo carregado via ajax e “??declarar ou definir??”
ele (seus objetos) para que fique disponível para toda a página? Já
procurei de tudo na internet e já testei muita coisa mas nada
funcionou.
Só funciona no IE, mesmo: http://www.w3schools.com/tags/att_script_defer.asp
Ou sejam, não usem. ;)
Not work in FF: http://developer.yahoo.com/performance/rules.html#js_bottom
Se for fugir dos padrões da W3C, acho melhor mesmo continuar entre a tag head os códigos JS
Só para constar. A recomendação colocar Javascript dentro da tag é antiga mas ainda é valida. O motivo é que em navegadores sem suporte a Javascript o código apareceria na tela.
Esse scripts ele execulta automático tipo ele abre um link automaticamente ?
http://www.w3schools.com/tags/att_script_defer.asp
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Sugiro , pesadamente , que todos leiam JavaScript a Bíblia (Português), página 45 , início do capítulo 5 , “Onde os scripts entram no documento HTML”, pra quem não tem o livro aqui vai uma colher de chá ..em inglês…
file:///C:/Users/acgen/MeusEstudosTecnologia30.12.2016/JavaSdcriptBilblia/javascript_bible.pdf
Sei que é difícil isso , mas quem sabe se alguém de BOM CORAÇÃO, não tem o CD do livro JavaScript a Bíblia , para me enviar…pois comprei o livro, e eles não enviaram o CD ……
https://www.facebook.com/manckenna