Печать только iFrame

Я работаю над системой разрешения случаев и в настоящее время использую jQuery colorbox для отображения списка открытых задач пользователю. Пользователи хотят иметь возможность печатать этот список, и я думаю, вы можете сделать это из самой страницы, добавив ссылку JavaScript, которая запускает окно.печать из iframe. Тем не менее, я также должен учитывать пользователей, возможно, выбирая печать из меню браузера. В этом случае, если colorbox открыт, я просто хочу распечатать его содержимое, а не вышележащая страница.

можно ли скрыть все, кроме содержимого iframed, используя файл CSS для печати? Если да, то как этого можно добиться? В противном случае мне нужно будет прибегнуть к JavaScript, поэтому возможно ли достичь эффекта в JavaScript?

6
css html iframe javascript printing

4 ответов

Это может работать, если iframe является прямым дочерним элементом body

<style type="text/css" media="print">
   body *{display:none}
   iframe{display:block}
</style>
-1
// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe>
// this is how you do it using jquery:
$("#print-iframe").get(0).contentWindow.print();

// and this is how you do it using native javascript:
document.getElementById("print-iframe").contentWindow.print();
5

в случае, если чистое решение CSS потерпит неудачу (не сработало для меня, но, возможно, я просто что-то пропустил), вы можете комбинировать решение CSS и JavaScript. Сначала это:

<style type="text/css" media="print">
   .hideonprint { display:none; }
</style>

тогда такой JavaScript заставит все содержимое быть скрытым при печати, кроме вашего фрейма:

<script type="text/javascript">
window.onbeforeprint = function WindowPrint(evt) {
    for (var i = 0; i < document.body.childNodes.length; i++) {
        var curNode = document.body.childNodes[i];
        if (typeof curNode.className != "undefined") {
            var curClassName = curNode.className || "";
            if (curClassName.indexOf("hideonprint") < 0) {
                var newClassName = "";
                if (curClassName.length > 0)
                    newClassName += curClassName + " ";
                newClassName += "hideonprint";
                curNode.setAttribute("original_class", curClassName);
                curNode.className = newClassName;
            }
        }
    }
    document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class");
}
</script>

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

0

Я нашел метод, который работает для печати только содержимого IFrame, даже если клиент использует пункт меню печати браузера, но я не мог сказать вам, почему это так. Фокус в том, чтобы установить фокус на IFrame перед печатью. Таблица стилей печати также необходима, хотя javascript, похоже, происходит, когда пользователь печатает из меню. Чтобы это сработало, нужны обе части. Он печатает весь документ, даже если он больше кадра! Я успешно протестировал его в IE8, Firefox 5 и 6 и Safari 3.2.

Я использую этот скрипт в качестве обработчика события onclick для кнопки или ссылки" print me":

<script type="text/javascript" language=JavaScript>
    function CheckIsIE()
    {
        if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER') 
            { return true;  }
        else 
            { return false; }
    }
    function PrintThisPage()
    {
         if (CheckIsIE() == true)
         {
            document.content.focus();
            document.content.print();
         }
         else
         {
            window.frames['content'].focus();
            window.frames['content'].print();
         }
     }
</script>

рассматриваемый IFrame имеет имя и идентификатор содержимого. Моей кнопки в div называется print_iframe нюхают браузера важно! Затем я использую таблицу стилей только для печати, связанную следующим образом:

<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" />

@charset "utf-8";
/* CSS Document */
body { background:none; }
#left { display:none; }
#main img { display:none; }
#banner
{
display:none;
margin-top:0px;
padding:0px;
}
#main 
{
margin-top:0px;
padding:0px;
}
#print_iframe 
{
display:none;
}
0