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", iframe.data("src")); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><button id="postYourAdd" onclick="postYourAdd()">OPEN</button><iframe id="forPostyouradd" data-src="http://www.w3schools.com" 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');    iframe1.style.display = '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() {  modal.style.display = "block";  trailer.setAttribute('src', trailer.getAttribute('data-src'));}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {  modal.style.display = "none";}
// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {  if (event.target == modal) {    modal.style.display = "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="https://www.youtube.com/embed/TDwJDRbSYbw" 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 = 'https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,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.classList.toggle('hide');
  f.setAttribute('src', link);
}

.hide {
  display: none;
}

<form> 
    <button type="button" id="files" onclick="show()">Database<span id="waiting"></span></button> 
</form>
<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 = 'http://example.com';
   document.body.appendChild(iframe);

};

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: "http://example.com" }).appendTo("body");
});

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

Html:

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

In your jQuery:

$("button").click(function(){
    var iframe = $("#myiFrame");
    iframe.attr("src", iframe.data("src")); 
});

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:

$("button").click(function(){
    $("iframe").each(function(){
        $(this).attr("src", $(this).data("src"));
    });
});

How to Display an Iframe on Button Click