โหลด iframes บนแท็บคลิก

ฉันมีแท็บมากมาย ในแต่ละแท็บฉันมี iframe ซึ่งฉันต้องการโหลดเมื่อฉันกดแท็บเท่านั้น ฉันไม่ต้องการให้โหลดแอปทั้งหมดเมื่อโหลดหน้าเว็บแล้ว สิ่งนี้จะสำเร็จได้อย่างไร?

ฉันยังใหม่กับ JSP และ Javascript ..

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

person hello_its_me    schedule 05.01.2016    source แหล่งที่มา
comment
อย่าใช้ไอเฟรม ใช้ AJAX เพราะเหตุใด   -  person PDKnight    schedule 05.01.2016
comment
@PDKnight คุณควรบอกเขาว่าทำไม   -  person l2aelba    schedule 05.01.2016
comment
@PDKnight การไม่ใช้ iframes ไม่ใช่ตัวเลือกสำหรับฉันตอนนี้ .. ฉันกำลังฝังส่วนหนึ่งของเว็บไซต์ส่วนที่สามลงในหน้าเว็บของฉัน   -  person hello_its_me    schedule 05.01.2016
comment
ทำไม่ได้จริงๆ ไม่มีทางเลือกอื่นแล้วเหรอ? คุณไม่สามารถเปลี่ยนรหัสของเว็บไซต์ส่วนที่สามที่คุณฝังไว้ได้?   -  person PDKnight    schedule 05.01.2016
comment
@PDKnight น่าเสียดายที่ไม่ ฉันทำไม่ได้ ..   -  person hello_its_me    schedule 05.01.2016
comment
@PDKnight แต่นั่นมีไว้สำหรับการอ้างอิง ฉันจะตรวจสอบมัน   -  person hello_its_me    schedule 05.01.2016
comment
คุณจะฝังเว็บไซต์ส่วนที่สามได้อย่างไร?   -  person PDKnight    schedule 05.01.2016


คำตอบ (1)


อาแจ็กซ์ดีกว่า!

ตามที่แนะนำจาก @PDKnight คุณควรใช้ ajax และในตอนท้ายของโซลูชันนี้ คุณจะเห็นว่าทำไม

นี่คือซอที่ใช้งานได้สำหรับคุณ (รหัส 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>

คุณจะเห็น (ในคอนโซลขณะกดเมนูแรกหรือเมนูที่สอง) ว่า คุณไม่สามารถโหลดลิงก์ที่ไม่อนุญาต X-ORIGIN อ่านเพิ่มเติมที่นี่) แต่คุณสามารถโหลด iframe ได้ในแท็บแรกเท่านั้น (แท็บที่ใช้งานได้) เนื่องจาก Google Maps อนุญาตให้ X-ORIGIN ฝัง

โปรดยกนิ้วให้ถ้าทำงานเพื่อคุณ;)

person Paolo Falomo    schedule 05.01.2016
comment
ฉันกำลังคุยกับเขา และเขาอธิบายว่าเขาใช้ Kibana ซึ่งสร้าง iframes น่าเสียดายที่ AJAX ไม่สามารถทำได้ :( - person PDKnight; 05.01.2016
comment
สาปแช่ง! xD Whell iframe เป็นทางออกสุดท้าย :/ - person Paolo Falomo; 05.01.2016
comment
โอ้โห ฉันเห็นอะไรมากมายที่นี่ตอนนี้!... ลูกศร... ลูกศรทุกที่ :D - person Paolo Falomo; 05.01.2016