我有一堆標籤，在每個標籤中我有一個iframe，我只想在加載時按下標籤。我不希望在加載頁面後加載所有應用程序。這如何實現？在標籤上加載iframe點擊

我是新來的JSP和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>

來源

2016-01-05 hello_its_me

請勿使用iframe。使用[AJAX]（https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started）。 [爲什麼？]（http://stackoverflow.com/questions/10656992/why-ajax-over-iframes） – PDKnight

@PDKnight你應該告訴他爲什麼 – l2aelba

@ l2aelba完成：P – PDKnight

Ajax是更好！

正如從@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-ORIGINread more here）鏈接。但是，您可以在iframe中加載第一個標籤（工作的），因爲Google地圖允許X-ORIGIN 嵌入。

如果爲你工作，請豎起大拇指;）

來源

2016-01-05 14:40:22

我正在和他聊天，他解釋他使用的是Kibana，它會生成iframe，所以不幸的是，用AJAX無法做到這一點:( – PDKnight

該死的！xD Whell iframe是最後一個解決方案：/ –

..你去了; ） – PDKnight

在標籤上加載iframe點擊

回答

Ajax是更好！

相關問題