如何在點擊鏈接時創建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？

回答

相關問題