show a loader within an iframe with dynamic content

Question

I have an iframe that loads dynamically inside a bootstrap modal.

I would like to display my loader elements just inside the modal-body parent div while it loads the content or switches between the contents when clicked.

My code: http://jsfiddle.net/mzshtd2p/5/

code from the 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});
});

How can I achieve this?

Found it. http://stackoverflow.com/questions/11961438/how-to-implement-a-loading-indicator-for-a-bootstrap-modal-waiting-for-ajax-to-f — user2513846, Aug 16 '16 at 19:42

score -1 · Answer 1 · answered Aug 16 '16 at 05:28

You mean

$("#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})

});

Note that the onload handler when loading and navigation inside the iFrame will only work if your content in the iFrame is from the same origin as the script. From inside the iFrame you can try

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

show a loader within an iframe with dynamic content

1 Answers1