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

Question

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

0

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

сценарий

У нас есть различные ссылки на сайте в контейнерах. Нажав на один из них, мы используем 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 !?

Я застрял. Любые мысли/советы?

SebastianP 31 март 2014, в 11:56

Источник

Теги:

jquery

iframe

2 ответа

1

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

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();
});

ДЕМО ЗДЕСЬ

Kiranramchandran 31 март 2014, в 07:37

Ещё вопросы

Jai · Accepted Answer · 2014-03-31T07-47-00.000Z

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

<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- data-*:

<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') +'">');
});

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

2 ответа

скрипка

Ещё вопросы