動的コンテンツを含むiframe内にローダーを表示します

Question

私は、ブートストラップモーダル内で動的に読み込まれるiframeを持っています。

モーダルボディの親div内にローダー要素を表示したいときは、コンテンツを読み込んでいる間、またはクリックしたときにコンテンツ間を切り替える必要があります。

マイコード：フィドルから http://jsfiddle.net/mzshtd2p/5/

コード：

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

あなたはiframe内にコンテンツがスクリプトと同じ起源からのものである場合のiFrame内のロードとナビゲーションにのみ機能しますonloadイベントハンドラこと

$("#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の中からお試しください

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