Firefox не будет печатать iframe в стиле отображения: нет

Question

Я использую код из этого ответа, чтобы напечатать отдельную страницу прямо с кнопки печати.Пользователь нажимает кнопку печати, и URL-адрес отправляется в функцию печати.Функция печати загружает отдельную страницу в iframe display:none и печатает этот iframe onLoad.Работает в IE, Chrome, но не в Firefox.В Firefox он загружает страницу в div, но никогда не печатает и не открывает диалог печати.Оказывается, Firefox не будет печатать iframe, если он установлен на display:none, как показано ниже:

<div id="printerDiv" style="display:none"></div>

Это ожидаемое поведение?Все другие браузеры печатают, я думаю о публикации на Bugzilla.Я попробовал некоторые хитрости css, чтобы div не отображал то, где пользователь может его видеть, но он всегда каким-то образом виден.В настоящее время я использую приведенный ниже CSS, чтобы сделать iframe невидимым:

#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}

Но его поля все еще существуют и оставляют разрыв в 14px после генерации iframe.Есть ли какой-нибудь способ сделать iframe невидимым вообще без атрибута display:none?А еще лучше, есть ли способ сделать это без такого взлома?

Я даже пытался использовать CSS, чтобы установить для iframe значения display:block @print media и display:none для экрана, функция JS по-прежнемуне будет печатать.

Answer 1

Если вы полностью разместите свой iFrame со страницы, он все равно будет доступен для печати, пока не будет виден пользователю.

#printerDiv iframe{
  position: absolute;
  top: -1000px;
}

Answer 2

У меня была точно такая же проблема. Когда атрибут display установлен в none, Firefox возвращает 0 для $('#printerDiv').css('height'), $('#printerDiv')[0].style.height или когда для элемента вызываются outerHeight() или outerWidth().

Я использовал z-index для этого, который не обязывает вас использовать position:absolute.

Итак, вы можете иметь это в файле CSS:

#printerDiv { z-index: -10; }

Затем, когда вы хотите сделать его видимым, просто установите z-index с помощью вызова jquery css ().

Answer 3

Если вы управляете содержимым iframe, сделайте так, чтобы он сам печатал:

<script type="text/javascript">
window.print()
</script>