How to make a button that calls an iframe

Question

In the iframe below, I need it just to be shown when I click any button. How do I do this?

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

Answer 1

• Hide the <iframe> with CSS (display:none)
• When clicking the button, use javascript to display, as follows:

function exibirIframe()
{
    document.getElementById("iframe").style.display = "block";
}

#iframe {
    display: none;
}

<div>
    <iframe
            width="1100"
            height="500"
            id="iframe"
            src="https://www.google.com"
            scrolling="no">
    </iframe>
</div>
<input type="button" value="Exibir Iframe" onclick="exibirIframe();" />

Only one note: pages like the google.com will not allow other domains to use it in iframes for security reasons. This is done through header X-Frame-Options sent by the server. I hope you used this page only as an example.

Answer 2

If you want another alternative using jQuery, just include the jQuery code call and include at the end of the file this code snippet:

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

I believe the above code is self-explanatory, but if you need any help or explanation just call.