How to Display an Iframe on Button Click

How to display an iframe on button click

At least in the Snippet you provided, you forgot to add a reference to JQuery. See it working now:

function postYourAdd () {    var iframe = $("#forPostyouradd");    iframe.attr("src","src")); }
<script src=""></script><button id="postYourAdd" onclick="postYourAdd()">OPEN</button><iframe id="forPostyouradd" data-src="" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>

How to display an iframe by clicking a button (JavaScript)

Add type="button" to your <button>. As it is right now, it is inside a form, and without any type attribute — that way it defaults to type submit, so when you click it, the page is submitted and disappears.

Also, change onclick="show()" to onclick="show", or better yet — use .addEventListener() instead.

function show() {    var iframe1 = document.getElementById('iframe'); = 'block';}
<!DOCTYPE html PUBLIC><html>  <head>    <title>Welcome</title>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="global.css"/>    <link rel="stylesheet" type="text/css" href="buttons.css"/>    <link rel="stylesheet" type="text/css" href="paragraphs.css"/>    <link rel="stylesheet" type="text/css" href="iframes.css"/>    <script type="text/javascript" src="files.js"></script>  </head>  <body>    <form> <button type="button" id="files" onclick="show">Files</button> </form>    <iframe id="iframe" src="files.html" width="200" height="100"></iframe>  </body></html>

How to load a iframe only on button click

You can change the src attribute to a data-src, then when you click the button, set src to data-src

// Get the modalvar modal = document.getElementById('trailerdivbox');
// Get the button that opens the modalvar btn = document.getElementById("watchbutton");
var trailer = document.getElementById('trailervideo');
// When the user clicks the button, open the modal btn.onclick = function() { = "block"; trailer.setAttribute('src', trailer.getAttribute('data-src'));}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() { = "none";}
// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) { if ( == modal) { = "none"; }}
/* Watch Trailer Button CSS */
#watchbutton { background-color: #f2f2f2; color: red; font-weight: 600; border: none; /* This one removes the border of button */ padding: 10px 12px;}
#watchbutton:hover { background-color: #e2e2e2; cursor: pointer;}
#trailerdivbox { display: none; width: 100%; height: 100%; position: fixed; overflow: auto; /* Enable Scrolling */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */}
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
.videoWrapper iframe { position: absolute; max-width: 560px; max-height: 315px; width: 95%; height: 95%; left: 0; right: 0; margin: auto;}
<button id="watchbutton">Watch Trailer ►</button>

<div id="close"> <div id="trailerdivbox"> <div class="videoWrapper"> <iframe id="trailervideo" class="trailervideo" width="560" height="315" data-src="" frameborder="0" allowfullscreen></iframe> </div> </div></div>

How to show iframe after button click

Javascript has nice function for that (classList.toggle). And i suggest to start loading the table if somebody clicked the button. If you have many tables on your side the page will be very slow. I have included it as an example.

function show() {
const f = document.getElementById('myiframe');
const link = ',68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt';
document.getElementById('waiting').innerText = " - please wait";
f.setAttribute('src', link);
.hide {
display: none;
<button type="button" id="files" onclick="show()">Database<span id="waiting"></span></button>
<iframe class="hide" id="myiframe" frameBorder='no' src="" width= "600" height="460" >...</iframe>

Is it possible to create an iframe on click of a button using javascript

document.getElementById('print-button').onclick = function() {

var iframe = document.createElement('iframe');
iframe.src = '';


Of course, if you're intending to attach more events of the same type, use addEventListener().

If jQuery is at your disposal...

$("#print-button").click(function() {
$("<iframe />", { src: "" }).appendTo("body");

How do I make <iframes> load only on a button click?


<iframe id="myiFrame" data-src="http://my.url" src="about:blank">

In your jQuery:

var iframe = $("#myiFrame");

Or if you wanted to load ALL iframes when you click one button... make sure they all have a data-src="your.url" attribute, and then loop through like this:

$(this).attr("src", $(this).data("src"));

Related Topics

Leave a reply