Create and populate iFrame onClick of a button?

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!
894359Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Ryan ChongConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.