在動態內容的iframe中顯示加載器

Question

我有一個在引導模式內動態加載的iframe。

我想顯示我的加載程序元素只是在模態體的父div，而它加載內容或點擊時在內容之間切換。

我的代碼：

HTML：

<div class="container"> 
    <a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a> 
    <br /> 
    <a class="modalButton" data-toggle="modal" data-src="https://www.youtube.com/embed/7Sv2QbVK1JA" data-height=320 data-width=450 data-target="#myModal">Click me</a> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
     <div class="modal-body"> 
       <iframe frameborder="0"></iframe> 
       <div id="loading">Please wait...</div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 
</div> 

JS：

$('a.modalButton').on('click', function(e) { 
    var src = $(this).attr('data-src'); 
    var height = $(this).attr('data-height') || 300; 
    var width = $(this).attr('data-width') || 400; 

    $("#myModal iframe").attr({'src':src, 
         'height': height, 
         'width': width}); 
}); 

我怎樣才能做到這一點從小提琴 http://jsfiddle.net/mzshtd2p/5/

代碼？

Answer 1

你的意思是

$("#myModal iframe").on("load",function() { 
    $("#loading").hide(); 
}); 
$('a.modalButton').on('click', function(e) { 
    var src = $(this).attr('data-src'); 
    var height = $(this).attr('data-height') || 300; 
    var width = $(this).attr('data-width') || 400; 
    $("#loading").show(); 
    $("#myModal iframe").attr({'src':src, 
         'height': height, 
         'width': width}) 

}); 

注意onload處理時加載和導航的iFrame內將只有在iFrame中你的內容是來自同一產地的腳本工作。 從iFrame裏面你可以試試

$("a").on("click",function() { 
    parent.$("#loading").show(); 
});