0

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 link. When the iframe pops up the rest of the page will become un responsive and once the user comes out of the iframe the the outer page becomes responsive. The table td is something is like this :

<td >
<a href="configuration.xml related jsp action">Set the Iframe up</a>
</td>

The iframe will be populated by the contents of another jsp .

EDIT : I was in a hurry, so forgot to paste the code that i tried : So here it is :

<td >
<a href="#">Set the Iframe up</a>
<div id="modalMan" style="display:none;">
<div class="modalsub" >
<p class="close"><a href="#"><img src="cbutton.gif" alt="Close"/></a></p>
<iframe id="myFrame" style="display:none;" height="430" width="675" 
src="myJSP.jsp" >
</iframe>
</div>
</div>
</td>

This however is creating a problem as close icon is not coming and the part of the div i.e. 

   <div id ="modalman">
   <p class>
   <iframe src>

All remain hidden and an iframe opens with similar look, but the functionalities are all scrambled up, the javascript contents of myjsp remain hidden .

EDIT AGAIN : I am very sorry i forgot to mention that i have tried the onclick functionality, but since my href is like this so it goes and opens the jsp directly in a new browser tab instaed of opening it in an iframe.

 <a href="configuration.xml related jsp action">Set the Iframe up</a>

How can i achieve this ? Kindly suggest a way .

The Dark Knight
  • 5,455
  • 11
  • 54
  • 95

4 Answers4

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);
}
George
  • 36,413
  • 9
  • 66
  • 103
  • I am very sorry i forgot to mention that i have tried the onclick functionality, but since my href is like this Set the Iframe up so it goes and opens the jsp directly in a new browser tab instead of opening it in an iframe. – The Dark Knight Nov 27 '12 at 12:50
  • I don't really understand are you saying you'd like the iFrame location to be the ``'s `href`? – George Nov 27 '12 at 12:52
  • No i have xml related action which comes up in the href , that's needed for java processing. So when i do an onclick, the iframe does not open up in a pop up , rather it goes and opens the jsp in a new browser window . – The Dark Knight Nov 27 '12 at 13:01
  • Is there a way to do this without using a href="#" ? Because that will cause the browser to scroll to the top of the page – Michael d Oct 21 '15 at 07:19
  • You can prevent the default behavior or you can use another 'empty href' placeholder. See [this question](http://stackoverflow.com/a/138233/1612146) – George Oct 21 '15 at 08:04
0

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%"});
        });
Awais Qarni
  • 17,492
  • 24
  • 75
  • 137
0

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.

Yevgeniy
  • 2,614
  • 1
  • 19
  • 26
0

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>​
Muthu Kumaran
  • 17,682
  • 5
  • 47
  • 70