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

Question

我有一个网页，表格中有几个链接。其中一个链接位于 td 标签内。我想要一种调用 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在 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

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

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

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

Answer 3

你也可以尝试使用带有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>​

Answer 4

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