0

Olá, estou desenvolvendo uma página html, e nela desejo executar um iframe com link de outra página(texto), o iframe demora cerca de 2 a 3 segundos para ser renderizado/carregado, e eu desejo colocar uma animação de "loading" até que o link do iframe seja totalmente carregado.

Olhei a lista de eventos DOM mas não achei nenhum que se encaixe no meu problema. https://www.w3schools.com/jsref/dom_obj_event.asp

Este é o código responsável por criar dinamicamente o iframe e seu Source.

function texton(x) {
    var a = document.createElement('div')
    a.className = "iframe"
    a.innerHTML = `<iframe src=${x}></iframe>`
    a.innerHTML += '<button onclick="textoff()" class="btn btn-green" id="bclose">Fechar</button>'
    document.body.appendChild(a)
    a.addEventListener('load', function () {
        console.log("carregado com sucesso")
    })
}
1
  • Existe uma abordagem usando apenas CSS. Voce tentou usar de outra forma ou tem que ser via JS mesmo? 17/11/2020 às 16:49

1 Resposta 1

0

Usando uma animação de um gif, podemos usar o CSS para inserir uma animação de loading enquanto o iframe está sendo carregado. A animação sera um gif como background de uma classe que iremos usar na div que vai conter o iframe, vamos chamar essa classe de iframe-div. Veja o CSS:

.iframe-div {
   text-align: center;
   background: url(https://media1.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif)
        center center no-repeat;
}

Agora no JavaScript, vamos criar um iframe usando var iframe = document.createElement('iframe');, igual voçê fez para a div. Vou colocar código com explicações:

function texton(x) {
            var a = document.createElement('div');
            var iframe = document.createElement('iframe'); // criamos um iframe dessa forma

            a.className = 'iframe-div'; // essa classe importante para a animacao

            // atribuir propriedades do iframe
            iframe.setAttribute('src', x); // source recebido como parametro
            iframe.setAttribute('id', 'iframe'); // esse id vai ser importante
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('width', '500');
            iframe.setAttribute('height', '340');

            a.appendChild(iframe); // adicionamos o ifram dentro da div

            a.innerHTML +=
              '<button onclick="textoff()" class="btn btn-green" id="bclose">Fechar</button>';
            document.body.appendChild(a);

            var ifr = document.getElementById('iframe'); // aqui vamos pegar o elemento iframe 
                                                         // pelo id para ai sim verificarmos se o iframe carregou ou nao

            // agora sim podemos verificar se o iframe carregou.
            ifr.onload = function () {
              console.log('carregado com sucesso');
              a.setAttribute('class',''); removemos a classe para a animacao ser removida da div
            };
          }

          texton('https://www.youtube.com/embed/O6P86uwfdR0');

Veja o exemplo abaixo:

OBS: o SO nao vai carregar o conteudo do iframe, mas serve para exemplificar

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .iframe-div {
      text-align: center;
      background: url(https://media1.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif)
        center center no-repeat;
    }
  </style>
  <body>
    <script>
      function texton(x) {
        var a = document.createElement('div');
        var iframe = document.createElement('iframe');

        a.className = 'iframe-div';

        iframe.setAttribute('src', x);
        iframe.setAttribute('id', 'iframe');
        iframe.setAttribute('frameborder', '0');
        iframe.setAttribute('width', '500');
        iframe.setAttribute('height', '340');
        a.appendChild(iframe);

        a.innerHTML +=
          '<button onclick="textoff()" class="btn btn-green" id="bclose">Fechar</button>';

        document.body.appendChild(a);

        var ifr = document.getElementById('iframe');

        ifr.onload = function () {
          console.log('carregado com sucesso');
        };
      }

      texton('https://www.youtube.com/embed/O6P86uwfdR0'); // criando um iframe dinamicamente
    </script>
  </body>
</html>

Essa possível solução resolve seu problema?

1
  • Sim amigo, isto resolve para mim, muito obrigado! 17/11/2020 às 20:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .