Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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();
}
like image 958
Karel Sniper Žák Avatar asked Aug 24 '26 01:08

Karel Sniper Žák


1 Answers

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);
}
like image 122
Karel Sniper Žák Avatar answered Aug 25 '26 15:08

Karel Sniper Žák



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!