Solved

Create and populate iFrame onClick of a button?

Posted on 2016-10-12
1
78 Views
Last Modified: 2016-10-12
Is it possible to create and populate a 40px x 40px iFrame that loads google.com on the click of a button? The iFrame can not exist until the button is clicked. NO JQuery please.

Thanks!
0
Comment
Question by:894359
1 Comment
 
LVL 50

Accepted Solution

by:
Ryan Chong earned 500 total points
ID: 41841267
you can try below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form method="post" action="" id="form1">
    <div>
        <input id="Button1" type="button" value="button" onclick="generateIFrame()" />
        <br />
        <br />
        <br />
        <div id="test"></div>
    </div>
    </form>
</body>
</html>

<script>
    function generateIFrame() {
        var iframe = document.createElement('iframe');
        iframe.frameBorder = 0;
        iframe.width = "40px";
        iframe.height = "40px";
        iframe.id = "iframe1";
        iframe.setAttribute("src", "http://www.w3schools.com/");
        document.getElementById("test").appendChild(iframe);
    }
</script>

Open in new window

few things to be concerned:
1. 40px x 40px is relatively small
2. we cannot put google.com in iframe.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
javascript: add id amounts 5 47
PHP Form Calculate Total Price 10 42
Scroll 5 news at a time. 4 27
Html form and modal / img src -problem 3 9
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question