如何在点击链接时创建iframe？

我有一个表格中有几个链接的网页。其中一个链接位于td标签内。我想调用一个iframe，一旦用户点击链接就会打开。当iframe弹出时，页面的其余部分将不响应，一旦用户离开iframe，外部页面将变为响应。表td是这样的：如何在点击链接时创建iframe？

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

iframe将由另一个jsp的内容填充。

编辑：我很着急，所以忘了贴，我试图代码：所以在这里，它是：

<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>

然而，这是创造一个问题，因为关闭图标不来和的DIV即

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

部分全部留隐藏的iframe中有类似的外观打开，但功能都爬了起来，myjsp的JavaScript的内容保持隐藏。

再次编辑：我很抱歉，我忘了提，我都试过的onclick功能，但因为我的href是这样如此这般，并直接在新的浏览器标签页中打开的JSP instaed在打开它一个iframe。

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

我该如何做到这一点？请提出一个方法。

来源

2012-11-27 The Dark Knight

谢谢你们的反应热烈。我正在逐一检查他们。 –

继承人一个非常基本的JavaScript函数，可以做到这一点。函数参数是要将iFrame附加到其中的元素，以及您希望它指向的位置。

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); 
}

来源

2012-11-27 12:32:08 George

我很抱歉，我忘了提及我已经尝试过onclick功能，但是因为我的href就是这样的所以它直接在新的浏览器选项卡中打开jsp，而不是在iframe中打开它。 –

我不是很明白你是说你希望iFrame的位置是''''href'？ – George

不，我有xml相关的动作，它出现在href中，这是java处理所需要的。所以，当我做一个onclick时，iframe不会在弹出窗口中打开，而是在一个新的浏览器窗口中打开jsp。 –

您是否听说过colorbox有财产iframe:true？

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

示例代码From

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

来源

2012-11-27 12:31:44

如果使用 jquery

（你应该），你可以运行在您的链接的onlick如下：

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

其中foobar是您的iframe的父元素的ID。

来源

2012-11-27 12:32:11 Yevgeniy

您也可以尝试使用jQuery与fancybox插件

尝试这里的示例代码，http://jsfiddle.net/muthkum/ssWMc/1/

下面是完整的代码，

<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>

来源

2012-11-27 12:34:55

不能使用fancybox。我的组织代理不允许它。 –

您也可以从http://fancybox.net/下载fancybox并将其放入您的服务器。无论如何，你是受欢迎的。 –

如何在点击链接时创建iframe？

回答

相关问题