jQuery: загрузка iframe при нажатии - как написать управляемый код?

Question

Ищу отзывы / советы от продвинутых веб-разработчиков о том, как на самом деле написать управляемый код для этого сценария.

Сценарий

У нас на сайте размещены различные ссылки в контейнерах. Щелкнув один из них, мы используем jQuery для создания iframe и загрузки в него страницы.

Часть HTML: (начинается после тела)

    <a id="slot1" href="#0">Text</a>
    <a id="slot2" href="#0">Text</a>
    <a id="slot3" href="#0">Text</a>
    <a id="slot4" href="#0">Text</a>

    <!-- iframe content will be displayed within this div -->
    <div id="content">
    </div>

jQuery:

    <script>
    $("#slot1").click(function(){$("#content").html('<iframe src="http://www.google.de/">');});
    $("#slot2").click(function(){$("#content").html('<iframe src="http://www.google.com/">');});
    $("#slot3").click(function(){$("#content").html('<iframe src="http://www.google.co.uk/">');});
    $("#slot4").click(function(){$("#content").html('<iframe src="http://www.google.ru/">');});
    </script>

Теперь это становится утомительным и излишним, если список растет (подумайте о # slot57!). Как сделать это гибче и изящнее?

До сих пор я думал о таргетинге на все идентификаторы слотов $ ('[id ^ = "slot"]') и разрезании индекса (4), чтобы получить фактическое число нажатий. Но тогда как загрузить правильный контент iframe !?

Я застрял. Есть мысли / советы?

jquery iframe

0

SebastianP 31 Мар 2014 в 13:16

Answer 1

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

<a id="slot1" href="#google.de/">Text</a>
<a id="slot2" href="#google.com/">Text</a>
<a id="slot3" href="#google.co.uk/">Text</a>
<a id="slot4" href="#google.ru/">Text</a>

Тогда вы можете использовать этот код jQuery:

$('a[id^="slot"]').on('click', function(e){
    e.preventDefault(); // stops the jump of anchor
    $("#content").html('<iframe src="http://www.'+ $(this).attr('href').slice(1) +'">');
});

Или лучше, если вы используете html5 , тогда используйте атрибут data-* для обслуживания URL:

<a id="slot1" href="#0" data-url="http://www.google.de/">Text</a>
<a id="slot2" href="#0" data-url="http://www.google.com/">Text</a>
<a id="slot3" href="#0" data-url="http://www.google.co.uk/">Text</a>
<a id="slot4" href="#0" data-url="http://www.google.ru/">Text</a>

Тогда вы можете использовать этот код jQuery:

$('a[id^="slot"]').on('click', function(e){
    e.preventDefault(); // stops the jump of anchor
    $("#content").html('<iframe src="http://www.'+ $(this).data('url') +'">');
});

Скрипка

1

Jai 31 Мар 2014 в 13:31

Answer 2

Вы можете попробовать это

HTML

<a class='slots' href="http://www.google.de/">Text1</a>
    <a class='slots'href="http://www.google.com/">Text2</a>
    <a class='slots'  href="http://www.google.uk/">Text3</a>
    <a  class='slots' href="http://www.google.ru/">Text4</a>

    <!-- iframe content will be displayed within this div -->
    <div id="content">
    </div>

JS

  $('a').click(function(e){
   $("#content").html('<iframe src='+$(this).attr('href')+'>');
    e.preventDefault();
});

ДЕМО ЗДЕСЬ

1

Kiranramchandran 31 Мар 2014 в 13:41

jQuery: загрузка iframe при нажатии - как написать управляемый код?

2 ответа

Скрипка

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery