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"));
});
});
Related Topics
Getting Name of Parent Object from Value of Object
Hide Div If Value Is Blank (Javascript)
Javascript Scrollto Method Does Nothing
How to Check Whether Session Is Null or Not in JavaScript
Uncaught Typeerror: Cannot Read Property 'Click' of Null Chrome Extension
Prevent a White Space in the Beginning of a Input
Regex: Match a Word With Exactly One Occurrence of a Specified Character At the Beginning
Trouble Converting Dates String to Yyyy-Mm-Ddthh:Mm:Ss-Hh:Mm Format
How Get Total Sum from Input Box Values Using JavaScript
Retrieving Keys from Json Array Key-Value Pair Dynamically - JavaScript
How to Find Any Number That Includes a Certain Digit - Like 1323 Includes the Digit "2"
Javascript Check If Values Exist in Array Json
How Could I Get the Latest Date from an Array of Dates - Javascript/Typescript
Open File Explorer Window from JavaScript
Filter/Search from the Drop-Down List of Options Using Angular
Angular2 Do Actions After Dom Has Finished Rendering
How to Change the Width of Angular Material Button
How to Trigger Change of Option in Dropdown When Options Can Have Same Value