How to display an iframe on button click

Question

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</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="200" height="200" style="background:#ffffff"></iframe>

QwertyChouskie · Accepted Answer · 2016-07-05 00:35:14Z

9

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>

edited Jul 5, 2016 at 0:35

QwertyChouskie

10711 bronze badges

answered Oct 9, 2014 at 19:17

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nahid · Accepted Answer · 2018-05-29 00:21:17Z

3

<body>
<p>This is IFrame</p>
    <button onclick="displayIframe()">Click me</button>
  <div id="iframeDisplay"></div>  

<script>
    function displayIframe() {
        document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"../HtmlPage1.html\" height=\"200\" width=\"300\" ></iframe>";

    }
</script>
</body>

answered May 29, 2018 at 0:21

nahid

891 silver badge10 bronze badges

1 Comment

Derek Brown Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Muhammad Armaghan · Accepted Answer · 2019-10-11 10:31:49Z

0

function postYourAdd () {
    var iframe = $("#forPostyouradd");
    iframe.attr("src", iframe.data("https://www.google.com/")); 
}

<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>

answered Oct 11, 2019 at 10:31

Muhammad Armaghan

6297 silver badges8 bronze badges

Comments

Ben · Accepted Answer · 2023-01-11 02:12:25Z

0

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>

<button id="postYourAdd" onclick="light()">OPEN</button>
<iframe id="forPostyouradd" src="" title="W3Schools Free Online Web Tutorials">
</iframe>

<script>
function light() {
    var iframe = $("#forPostyouradd");
    debugger;
    iframe.attr("src", "https://www.w3schools.com/java/default.asp"); 
}
</script>
</body>
</html>

answered Jan 11, 2023 at 2:12

Ben

4774 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to display an iframe on button click

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related