liza liza - 5 months ago 29
HTML Question

How to display an iframe on button click

I just want to know how can I display an

iframe
on button click

Here is my code:



function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}

<button id="postYourAdd" onclick="postYourAdd()"></button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="200" height="200" style="background:#ffffff"></iframe>




Answer

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>