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">×</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();
}
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);
}