How to create an iframe on clicking a link?

Question

I have a web page with several links inside a table. One of the links is inside a td tag . I want a way to invoke an iframe, which will be opened once the user clicks on the

Answer 1

You can also try with jQuery with fancybox plugin

Try the sample code here, http://jsfiddle.net/muthkum/ssWMc/1/

Here is the complete code,

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">

<script>
$(function(){
    $("a").fancybox();
})
</script>

<a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>​

Answer 2

Heres a very basic JavaScript function that can do it. Function parameters are the element in which you want the iFrame to be appended to and the location in which you want it to point.

HTML

<a href="#" onclick="setIframe(this,'http://www.stackoverflow.co.uk')" >Set the Iframe up</a>

JavaScript

function setIframe(element,location){
    var theIframe = document.createElement("iframe");
    theIframe.src = location;
   element.appendChild(theIframe);
}

Answer 3

if you use jquery (and you should) you could run following in onlick of your link:

$('#foobar').append('<iframe></iframe>')

where foobar is the id of the parent element for your iframe.

Answer 4

Have you heard about colorbox with property iframe:true??

 <p><a class='iframe' href="http://google.com">Outside Webpage (Iframe)</a></p>

Example Code From

 $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
        });