Evento onload
Definição e uso
O evento onload ocorre após o objeto ser carregado.
O onload é mais usado no elemento <body>, para executar scripts após a página carregar todos os conteúdos (inclusive imagens, arquivos de script, arquivos CSS, etc).
O evento onload pode ser usado para verificar o tipo e a versão do navegador do visitante e carregar a versão correta da página da web com base nessas informações.
O evento onload também pode ser usado para lidar com cookies (veja mais exemplos abaixo).
Exemplo
Execute JavaScript imediatamente após o carregamento da página:
<body onload="myFunction()">
Exemplo 2
Use o onload no elemento <img>. Após carregar a imagem, exiba imediatamente o aviso "Image is loaded":
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Exemplo 3
Use o evento onload para lidar com cookies:
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies estão ativados.";
} else {
text = "Cookies não estão ativados.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
Sintaxe
No HTML:
<element onload="myScript">
No JavaScript:
object.onload = function(){myScript};
No JavaScript, use o método addEventListener():
object.addEventListener("load", myScript);
Notas:Internet Explorer 8 ou versões anteriores não suportam Método addEventListener().
Detalhes técnicos
| Bubbling: | Não suportado |
|---|---|
| Cancelável: | Não suportado |
| Tipo de evento: | Se gerado pela interface do usuárioUiEvent. Caso contrário Event. |
| Suportadas etiquetas HTML: | <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> |
| Versão DOM: | Eventos Nível 2 |
Suporte ao navegador
| Eventos | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onload | Suporte | Suporte | Suporte | Suporte | Suporte |
