Question

我有一个生成要打印的文档的php脚本。我试图将此脚本放入100％宽度和高度的bootstrap 4模式中，以便客户端检查内容然后将其打印出来。

<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>

我首先将iframe放入模态中，填充时（为了性能推理 - 有时它是一个非常长的文档） - 这是有效的

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

我需要在iframe元素上设置100％的高度。问题是以下jquery脚本返回0高度。可能是因为默认情况下隐藏在模态中。

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

我需要像超时一样来检查iframe填充后的高度，但我不知道如何。

无效：

在生成的iframe上使用onload parametr :(返回0px - 模态FadeIn可能比iframe追加更慢......）

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

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

Answer 1

这部分是从显示模态的按钮触发的。所以模态应该在iframe加载之前打开。

val i: Int = (for {
   int1 <- i1()
   int2 <- i2()
} yield (int2)) match {
   case Some(i) => i
   case None => 0
}

没关系。

但是现在，关于第二部分，选择器$('#print_modal').click(function () { $('#print_content').html('<iframe src="./index.php?print" frameborder="0" scrolling="no" id="print_frame"></iframe>'); });不存在于＆＃34;页面加载＆＃34;，我认为这个处理程序是定义的。这是一个可以使用delegation解决的问题。

试试这个：

#print_frame

Answer 2

<强>解决：关键是在 shown.bs.modal 上创建iframe（成功加载后由模态触发的BS4事件）然后onload parametr调用ifrhgh()函数设置iframe等于内容

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

jQuery：Bootstrap模式中的100％高度iframe

2 个答案: