1

No iframe abaixo, preciso que ele apenas seja mostrado quando eu clicar em um botão qualquer. Como faço isso?

<div>
    <iframe
            width="1100"
            height="500"
            id="iframe"
            src="https://www.google.com.br"
            scrolling="no"
    </iframe>
</div>

2 Respostas 2

1
  • Esconda o <iframe> com CSS (display:none)
  • Ao clicar no botão, use javascript para exibir, da seguinte forma:

function exibirIframe()
{
    document.getElementById("iframe").style.display = "block";
}
#iframe {
    display: none;
}
<div>
    <iframe
            width="1100"
            height="500"
            id="iframe"
            src="https://www.google.com.br"
            scrolling="no">
    </iframe>
</div>
<input type="button" value="Exibir Iframe" onclick="exibirIframe();" />

Só uma nota: páginas como o google.com.br não permitirão que outros domínios a utilizem em iframes, por conta de segurança. Isso é feito através do header X-Frame-Options enviado pelo servidor. Espero que tenha usado essa página só como exemplo.

1
  • Perfeito Marcus Vinicius, muito bom :) Muitíssimo obrigado.
    – Ruan Nawe
    Commented 20/10/2015 às 12:04
1

Caso queira outra alternativa utilizando jQuery, basta incluir a chamada do código jQuery e incluir ao final do arquivo este trecho de código:

<script>
$(document).ready(function ()
{
    $('iframe').hide();
    $('button').click(function ()
    {
        $('iframe').show();
    });
});
</script>

Acredito que o código acima seja auto-explicativo, porém, se precisar de alguma ajuda ou explicação é só chamar.

1
  • como ficaria com o botão?
    – Ruan Nawe
    Commented 20/10/2015 às 11:40

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 .