javascript - 在带有动态内容的 iframe 中显示加载程序

Question

我有一个在引导模式中动态加载的 iframe。

我想在 modal-body 父 div 中显示我的加载器元素，同时加载内容或在单击时在内容之间切换。

我的代码: http://jsfiddle.net/mzshtd2p/5/

来自 fiddle 的代码:

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});
});

我怎样才能做到这一点？

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})

});

请注意，仅当您在 iFrame 中的内容与脚本来自同一来源时，在 iFrame 中加载和导航时的 onload 处理程序才会起作用。您可以从 iFrame 内部尝试

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