CODEWITHSUNDEEP
jqueryiframe
SebastianP
SebastianP

Reputation: 51

jQuery: Loading iframe on click - how to write manageable code?

looking for some feedback / advice from advanced web devs on how to actually write manageable code for this scenario.

Scenario

We have various links on the site in containers. Upon clicking one of these, we use jQuery to create an iframe and load a page in it.

HTML part: (starting after body)

    <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>

Now this gets tedious and redundant if the list grows (think of #slot57 !). How to write it more flexible and elegant?

So far I thought of targeting all slot IDs $('[id^="slot"]') and slicing the index(4) in order to get the actual clicked number. But then how to load the right iframe content!?

I'm stuck. Any thoughts / advice?

Upvotes: 0

Views: 69

Answers (2)

Kiranramchandran
Kiranramchandran

Reputation: 2094

You Can Try This

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

DEMO HERE

Upvotes: 1

Jai
Jai

Reputation: 74748

if you are able to do some markup modification then you can try to do this in the markup:

<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>

then you can use this jQuery code:

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

or a better one if you are using html5 then use data-* attribute to serve the 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>

then you can use this jQuery code:

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

Fiddle

Upvotes: 1

Related Questions