在动态内容的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(); 
});