Как создать iframe при переходе по ссылке?

У меня есть веб-страница с несколькими ссылками внутри таблицы. Одна из ссылок находится внутри тега td. Мне нужен способ вызвать iframe, который будет открыт после того, как пользователь нажмет на ссылку. Когда всплывает iframe, остальная часть страницы перестает отвечать на запросы, и как только пользователь выходит из iframe, внешняя страница становится отзывчивой. Таблица td выглядит примерно так:

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

iframe будет заполнен содержимым другого jsp.

EDIT: я торопился, поэтому забыл вставить код, который пробовал: вот он:

<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 открывается с аналогичным видом, но все функциональные возможности перемешаны, содержимое javascript myjsp остается скрытым.

РЕДАКТИРОВАТЬ СНОВА: Мне очень жаль, что я забыл упомянуть, что я попробовал функциональность onclick, но поскольку мой href такой, он идет и открывает jsp прямо в новой вкладке браузера, а не открывает его. в iframe.

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

Как я могу достичь этого? Пожалуйста, предложите способ.


javascript jsp
person The Dark Knight    schedule 27.11.2012    source источник
comment
Спасибо, ребята, за исчерпывающие ответы. Я проверяю их один за другим.   -  person The Dark Knight    schedule 27.11.2012

Ответы (4)


arrow_upward
2
arrow_downward

Вот очень простая функция 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);
}
person George    schedule 27.11.2012
comment
Мне очень жаль, что я забыл упомянуть, что я пробовал функциональность onclick, но поскольку мой href похож на это действие JSP, связанное с href=configuration.xml›Установите Iframe вверх‹/a›, чтобы он пошел и открыл JSP напрямую в новой вкладке браузера, а не открывать его в iframe. - person The Dark Knight; 27.11.2012
comment
Я действительно не понимаю, вы говорите, что хотите, чтобы местоположение iFrame было href <a>? - person George; 27.11.2012
comment
Нет, у меня есть действие, связанное с xml, которое появляется в href, необходимое для обработки java. Поэтому, когда я делаю щелчок, iframe не открывается во всплывающем окне, а открывается и открывает jsp в новом окне браузера. - person The Dark Knight; 27.11.2012
comment
Есть ли способ сделать это без использования href=# ? Потому что это заставит браузер прокрутить страницу вверх. - person Michael d; 21.10.2015
comment
Вы можете предотвратить поведение по умолчанию или использовать другой заполнитель «пустой href». См. этот вопрос - person George; 21.10.2015

arrow_upward
0
arrow_downward

если вы используете jquery (и вы должны), вы можете запустить следующее в onlick вашей ссылки:

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

где foobar — это идентификатор родительского элемента для вашего iframe.

person Yevgeniy    schedule 27.11.2012

arrow_upward
0
arrow_downward

Вы также можете попробовать использовать 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>​
person Muthu Kumaran    schedule 27.11.2012
comment
не могу использовать fancybox. Мой оргпрокси не позволяет этого. - person The Dark Knight; 27.11.2012
comment
Вы также можете загрузить fancybox с сайта fancybox.net и разместить его на своем сервере. В любом случае добро пожаловать. - person Muthu Kumaran; 27.11.2012

arrow_upward
0
arrow_downward

Вы слышали о colorbox со свойством 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%"});
        });
person Awais Qarni    schedule 27.11.2012