Muat iframe pada klik tab

Saya memiliki banyak tab, di setiap tab saya memiliki iframe yang ingin saya muat hanya ketika saya menekan tab tersebut. Saya tidak ingin semua aplikasi dimuat setelah halaman dimuat. Bagaimana hal ini dapat dicapai?

Saya baru mengenal JSP dan Javascript..

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="/id#home">Home</a></li>
        <li><a data-toggle="tab" href="/id#menu1">First Menu</a></li>
        <li><a data-toggle="tab" href="/id#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>

javascript iframe jquery jsp
person hello_its_me    schedule 05.01.2016    source sumber
comment
Jangan gunakan Iframe. Gunakan AJAX. Mengapa?   -  person PDKnight    schedule 05.01.2016
comment
@PDKnight Anda harus memberi tahu alasannya   -  person l2aelba    schedule 05.01.2016
comment
@PDKnight Tidak menggunakan iframe bukanlah pilihan bagi saya sekarang.. Saya menyematkan bagian dari situs web bagian ketiga ke halaman web saya.   -  person hello_its_me    schedule 05.01.2016
comment
Anda tidak bisa melakukannya, sungguh, apakah tidak ada pilihan lain? Anda tidak dapat mengubah kode situs web bagian ketiga yang Anda sematkan?   -  person PDKnight    schedule 05.01.2016
comment
@PDKnight Sayangnya Tidak, saya tidak bisa..   -  person hello_its_me    schedule 05.01.2016
comment
@PDKnight Tapi itu untuk referensi, saya akan memeriksanya.   -  person hello_its_me    schedule 05.01.2016
comment
Bagaimana Anda menyematkan situs web bagian ketiga?   -  person PDKnight    schedule 05.01.2016

Jawaban (1)


arrow_upward
2
arrow_downward

Ajax lebih baik!

Seperti yang disarankan dari @PDKnight Anda harus menggunakan ajax dan di akhir solusi ini Anda akan mengetahui alasannya.

Ini biola yang berfungsi untuk Anda (kode jQuery).

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>

Anda akan melihat (di konsol sambil menekan Menu Pertama atau Menu Kedua) bahwa Anda tidak dapat memuat tautan yang tidak mengizinkan X-ORIGIN baca selengkapnya di sini). Namun Anda dapat memuat di iframe hanya tab pertama (tab yang berfungsi) karena peta Google mengizinkan penyematan X-ORIGIN.

Silakan acungkan jempol jika berhasil untuk Anda;)

person Paolo Falomo    schedule 05.01.2016
comment
Saya ngobrol dengannya dan dia menjelaskan bahwa dia menggunakan Kibana, yang menghasilkan iframe, jadi sayangnya, tidak mungkin melakukannya dengan AJAX :( - person PDKnight; 05.01.2016
comment
berengsek! xD Whell iframe adalah solusi terakhir :/ - person Paolo Falomo; 05.01.2016
comment
Ohh maan aku melihat banyak hal di sini sekarang!... panah... panah dimana-mana :D - person Paolo Falomo; 05.01.2016