Eventos onerror e onpageshow em JavaScript. Dica 27

Bem vindo a dica 27 de JavaScript da Em Busca do Código, e nesta dica veremos um exemplo do evento onerror e outro exemplo do evento onpageshow em JavaScript.

O vídeo complementa o texto e o texto completa o vídeo, assista.

Esta dica é baseada diretamente na documentação da W3C.

Evento onerror

O evento onerror é acionado quando um documento ou imagem não for carregado. Nesta dica utilizaremos ele em uma imagem e, diferentemente do exemplo da W3C, não utilizaremos um alert para informar que a imagem não foi carregada e sim o nosso já bem utilizado neste curso, document com getElementById. Eu já recebi feedbacks a respeito do uso de getElementById, não é errado utilizar, e assim que terminar de citar os eventos em JavaScript, vamos ter uma dica apenas sobre isso.

Voltando a esta dica em si, em nosso documento HTML inicial nós temos um documento inicial padrão.

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos onerror e onpageshow em JavaScript. Dica 27</title>
        <script src="js27.js"></script>
        <meta charset="UTF-8">
    </head>
    <body >
        <h1>Eventos onerror e onpageshow em JavaScript. Dica 27</h1>
        <img src="imagem.png">
</body>
</html>

Linkando um arquivo JS, e em especial um imagem, essa imagem na verdade não existe e é aí que está o nosso primeiro teste. Salve este código fonte inicial com o nome que você quiser (.html) e abra em seu navegador. O correto é aparecer aquela imagem padrão de quando a verdadeira image não foi carregada.

Agora começa nosso primeiro teste. Vamos adicionar o evento onerror na tag img desta imagem.

function error () {
}

E agora iremos utilizar document.getElementById para escrever algo em nosso documento HTML quando esse erro acontecer.

document.getElementById("jisso").innerHTML = "Uma imagem não carregou";

Eu informei um ID que eu não criei no HTML, isso acontece porque, quando for uma imagem, mesmo que essa imagem tenha o ID informado, não conseguiremos gerenciar o conteúdo dela desta maneira.

Uma solução encontrada para este exemplo foi adicionar uma figure como tag mãe dessa imagem.

Evento onpageshow

O evento onpageshow é acionado quando a página web termina de ser carregada, e vendo assim parece idêntico ao evento onload, mas, com duas grandes diferenças.

A primeira diferença é que, no Safari 4 e Internet Explorer 8 e versões anteriores desses dois navegadores, ele não funciona.

A segunda e na minha opinião a mais importante é que ele também é acionado também a partir do cache. Se a página web tiver os dois eventos, o evento onload ocorre antes.

Nós vimos o evento onload na dica número 24 deste curso. O link para a dica 24 está no final deste artigo junto com as fontes.

E assim como a dica 24, utilizaremos o evento onpageshow na tag body do nosso documento HTML.

Voltando ao documento JavaScript, agora iremos criar uma função para o evento onpageshow.

function show () {
}

Pela última vez nesta dica vamos ao doc HTML, vamos criar uma tag h2 com um id diferente.

Agora é só informarmos o que faz a function show.

function show () {
document.getElementById("idshow").innerHTML = "Página carregada";
}

Teste em seu navegador, e se eu puder deixar uma dica, utilize o bom senso.

Código fonte HTML (completo):

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos onerror e onpageshow em JavaScript. Dica 27</title>
        <script src="js27.js"></script>
        <meta charset="UTF-8">
    </head>
    <body onpageshow="show()">
        <h1>Eventos onerror e onpageshow em JavaScript. Dica 27</h1>
        <h2 id="idshow"></h2>
        <figure id="jisso">
            <img src="img/imagem.png" onerror="error()" width="500px">
        </figure>
    </body>
</html>

Código fonte JavaScript (completo):

function error () {
document.getElementById("jisso").innerHTML = "Uma imagem não foi carregada.";
}
function show () {
document.getElementById("idshow").innerHTML = "página carregada.";
}

Esta dica fica por aqui, espero que ela tenha sido útil, se foi útil já deixa seu like no YouTube (se der), compartilha com algum amigo que possa gostar também, se quiser complementar esta dica com alguma informação sobre estes eventos ou tiver alguma dúvida a respeito desta dica, ou algum feedback, comente lá no YouTube também. Até mais.

Fontes:

W3C: onpageshow W3c: onerror Dica 24: onload

Confira outras dicas de JS do site. Já temos muito mais que o básico.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.