小编Kar*_*Žák的帖子

jQuery:Bootstrap 模式中 100% 高度的 iframe

我有一个 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>
Run Code Online (Sandbox Code Playgroud)

我首先将 iframe 放入模式中,当填充时(出于性能推理 - 有时它是一个非常长的文档) - 这是有效的

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

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

$("#print_frame").on("load", function () {
  $(this).height($(this).contents().find("html").height());
}); …
Run Code Online (Sandbox Code Playgroud)

iframe jquery bootstrap-modal bootstrap-4

3
推荐指数
1
解决办法
7423
查看次数

标签 统计

bootstrap-4 ×1

bootstrap-modal ×1

iframe ×1

jquery ×1