Solved

Create and populate iFrame onClick of a button?

Posted on 2016-10-12
1
111 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 52

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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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.

734 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