jQuery: 100% высота iframe в модале Bootstrap - PullRequest
Новая
       11

jQuery: 100% высота iframe в модале Bootstrap

0 голосов
/ 09 июня 2018

У меня есть скрипт php, который генерирует документ для печати.Я пытаюсь вставить этот скрипт в модал начальной загрузки 4 с шириной и высотой 100%, чтобы клиент мог проверить содержимое и затем распечатать его. 

<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>');
});

Чем нужно установить высоту 100% для элемента iframe.Проблема в том, что следующий скрипт jquery возвращает 0 высоту.Вероятно, потому что по умолчанию скрыт в модальном. 

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

Мне нужно что-то вроде тайм-аута, чтобы проверить высоту iframe после его заполнения, но я не знаю как.

Не работает:

Использовать параметр onload для сгенерированного iframe: (return 0px - модальный FadeIn, вероятно, медленнее, чем iframe append ...) 

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

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

Ответы [ 2 ]

0 голосов
/ 10 июня 2018

решено: Ключом является создание iframe для shown.bs.modal (событие BS4, инициируемое модальным после успешной загрузки). Затем параметр загрузки загружает функцию 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);
}
0 голосов
/ 09 июня 2018

Эта часть здесь вызывается кнопкой, которая также отображает модальный режим.Таким образом, модал должен быть открыт до загрузки iframe. 

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

Так что все в порядке.

Но теперь, во второй части, селектор #print_frame не существует "«загрузка страницы», где я полагаю, этот обработчик определен.И это проблема, которая может быть исправлена ​​с помощью делегирования .

Попробуйте это: 

$(document).on("load","#print_frame",function(){
  var iframeHeight = $(this).contents().height();
  console.log(iframeHeight);  // Check the console for that value.

  $(this).height(iframeHeight);
});
...