0

我有一个网页，表格中有几个链接。其中一个链接位于 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>

我怎样才能做到这一点？请提出一种方法。

4

4 回答 4

2

这是一个非常基本的 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-27T12:32:08.920 回答
0

您听说过带有属性的彩盒iframe:true吗？

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

示例代码来自

 $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
        });
于 2012-11-27T12:31:44.490 回答
0

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

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

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

于 2012-11-27T12:32:11.977 回答
0

您也可以尝试使用带有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>​
于 2012-11-27T12:34:55.813 回答