1

Olá. Tenho a Pagina1.php que tem um iframe que fica em uma div invisível display:none, que mostra o iframe somente quando clico em um botão com a função ajax para mostrar a div invisível que está o iframe.

O problema é que quando debugo Pagina1.php mesmo sem ter clicado no botão vejo que ele percorre pelo código da página do iframe.

Gostaria de apenas executar o iframe quando eu clicar no botão para ele ficar visível.

Isso é possível?

2 Respostas 2

2

O elemento display:none apenas esconde o elemento da visualização do usuário, mantendo ele no carregamento da página. Você deve retirar o iframe do html e carrega-lo através de um evento onclick via javascript quando clicar no botão que exibe.

function exibirFrame(){
  $("#iframeExibe").html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235231.64761594174!2d-47.03026079999999!3d-22.895124900000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c8c8f6a2552649%3A0x7475001c58043536!2sCampinas%2C+SP!5e0!3m2!1spt-BR!2sbr!4v1440536173224" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>');
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="exibirFrame()">Exibir Frame</a>
<div id="iframeExibe">a</div>

1

De uma maneira muito simples, sem precisar do jquery, você pode fazer isso:

function viewIframe(idIframe, idUrl) {
        var obj =  document.getElementById(idIframe);
        var oLink =  document.getElementById(idUrl);
          if (obj.style.display == 'none') {
            obj.style.display = 'block';
            oLink.innerHTML='Esconder Iframe';
          } else { 
            obj.style.display = 'none';
            oLink.innerHTML='Exibir Iframe';
          }
}
   <a href="javascript:viewIframe('elemento', 'url')" id="url">Exibir Iframe</a>
    <div id="elemento" style="display:none">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/QcIy9NiNbmo" frameborder="0" allowfullscreen></iframe>
    </div>

Mas se quiser usar jquery, basta fazer isso:

function viewIframe(id) {
    if ( $('#' + id).is(':hidden')) {
        $('#' + id).show();
        $('.url').text('Esconder Iframe');
     } else {
        $('#' + id).hide();
        $('.url').text('Exibir Iframe');
     }
  }
   <a href="javascript:viewIframe('elemento')" class="url">Exibir Iframe</a>
    <div id="elemento" style="display:none">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/QcIy9NiNbmo" frameborder="0" allowfullscreen></iframe>
    </div>
   <script src="//code.jquery.com/jquery-latest.min.js"></script>

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 .