Load iframes on tab click

Question

I have a bunch of tabs, in each tab I have an iframe which I want to load only when I press the tab. I don't want all the apps to be loaded once the page is loaded. How can this be accomplished?

I'm new to JSP and Javascript..

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">First Menu</a></li>
        <li><a data-toggle="tab" href="#menu2">Second Menu</a></li>
    </ul>


    <div class="tab-content">

       <div id="home" class="tab-pane fade in active">
          <iframe id="iframe1" src=""></iframe>
       </div>

       <div id="menu1" class="tab-pane fade">
          <iframe id="iframe2" src=""></iframe>
       </div>

       <div id="menu2" class="tab-pane fade">
          <iframe id="iframe2" src=""></iframe>
         </div>

    </div>

Don't use Iframes. Use [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started). [Why?](http://stackoverflow.com/questions/10656992/why-ajax-over-iframes) — PDKnight, Jan 05 '16 at 13:56
@PDKnight Not using iframes isn't an option for me now.. I'm embedding a part of a third part website into my webpage. — hello_its_me, Jan 05 '16 at 14:00
You can't do it, really, isn't there any other option? You can't change the code of third part website you embed? — PDKnight, Jan 05 '16 at 14:04
@PDKnight But that's for the reference, I will look into it. — hello_its_me, Jan 05 '16 at 14:08

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Ajax is better!

As suggested from @PDKnight you should use ajax and at the end of this solution you'll see why.

Here is a working fiddle for you (jQuery code).

jQuery(document).ready(function($) {
  $('.nav-tabs > li > a').on('click', function(event) {
    //avoid <a> tag to load his href
    event.preventDefault();
    //getting the main subjects
    var id_of_selected = $(this).attr('load-in');
    var link_to_load = $(this).attr('href');
    var iframe_to_load = $(document).find('#' + id_of_selected);
    console.log(iframe_to_load);
    //make the magic
    if (iframe_to_load.length) {
      iframe_to_load.attr('src', link_to_load); //this fires the link to destinated iframe
      iframe_to_load.parent().addClass('active'); //this make the parent div container of iframe visible
    }

  });
});

.tab-pane {
  display: none;
}
.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11173.933562701173!2d12.2363393!3d45.560717000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sit!2sit!4v1452004351715" load-in="iframe1">WORKING!</a>
  </li>
  <li><a data-toggle="tab" href="http://www.youtube.com" load-in="iframe2">First Menu</a>
  </li>
  <li><a data-toggle="tab" href="http://www.facebook.com" load-in="iframe3">Second Menu</a>
  </li>
</ul>
<div class="tab-content">

  <div id="home" class="tab-pane fade in">
    <iframe width="200" height="200" style="width:200px;height:200px;" id="iframe1" src=""></iframe>
  </div>

  <div id="menu1" class="tab-pane fade">
    <iframe id="iframe2" src=""></iframe>
  </div>

  <div id="menu2" class="tab-pane fade">
    <iframe id="iframe3" src=""></iframe>
  </div>

</div>

You'll see (in console while pressing "First Menu" or "Secon Menu") that you cannot load links that doesn't allow X-ORIGIN read more here). But you can load in the iframes just the first tab (the working one) because google maps allow X-ORIGIN embeding.

Please thumbs up if worked for u ;)

I'm chatting with him and he explained he's using Kibana, which generates iframes, so unfortunately, it's not possible to do it with AJAX :( — PDKnight, Jan 05 '16 at 14:50
Ohh maan i see so much things over here now!... arrows... arrows everywhere :D — Paolo Falomo, Jan 05 '16 at 14:55

Load iframes on tab click

1 Answers1

Ajax is better!