Question

我有一个网页，里面有几个链接。其中一个链接位于td标记内。我想要一种方法来调用iframe，一旦用户点击链接就会打开iframe。当iframe弹出时，页面的其余部分将变为无响应状态，一旦用户离开iframe，外部页面就会响应。表td是这样的：

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

我怎样才能做到这一点？请建议一种方式。

Answer 1

这是一个非常基本的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);
}

Answer 2

您是否听说过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%"});
        });

Answer 3

如果您使用jquery（并且应该），则可以在链接的onlick中运行以下内容：

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

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

Answer 4

您也可以尝试使用fancybox插件

的jQuery

在此处尝试示例代码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>

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

4 个答案: