Search code examples
jqueryiframebootstrap-4bootstrap-modal

jQuery: 100% height iframe in Bootstrap modal


I have a php script that generates a document to print. I'm trying to get this script into a bootstrap 4 modal in 100% width and height so the client can check the content and then print it out.

<button type="button" id="print_modal" class="btn btn-primary" data-toggle="modal" data-target="#printmodal">Result</button>
<div class="modal fade" id="printmodal">
    <div class="modal-dialog" style="max-width:210mm !important">
        <div class="modal-content">
          <div class="modal-header">
            <button class="btn btn-primary ml-1" id="print_btn">Tisk</button>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body text-left" id="print_content">
            <!-- IFRAME HERE -->
          </div>
        </div>
    </div>
</div>

I first put the iframe into the modal, when is populated (for performance reasoning - sometimes it's a really long document) - this is working

$('#print_modal').click(function () {
  $('#print_content').html('<iframe src="./index.php?print" frameborder="0" scrolling="no" id="print_frame"></iframe>');
});

Than I need set 100% height on iframe element. The problem is that following jquery script returning 0 height. Probably because is hidden in modal by default.

$("#print_frame").on("load", function () {
  $(this).height($(this).contents().find("html").height());
});

I need something like timeout to check height of iframe after its populated, but I dont know how.

Not working :

Use onload parametr on generated iframe: ( return 0px - modal FadeIn is probably slower then iframe append ...)

<iframe src="./index.php?print" onload="ifrhgh()">

function ifrhgh(){
   var iframehght =  $("#print_frame").contents().height();
}

Solution

  • SOLVED: The key is create iframe on shown.bs.modal (BS4 event triggered by modal after success load) Then onload parametr calling ifrhgh() function which set iframe equal to content

    $(function () {
        $('#printmodal').on('shown.bs.modal', function () {
            $('#print_content').html('<iframe width="100%" onload="ifrhgh()" src="./index.php?print" frameborder="0" scrolling="no" id="print_frame"></iframe>');
        });
    });
    
    function ifrhgh(){
        var iframehght =  $("#print_frame").contents().height();
        $("#print_frame").height(iframehght);
    }