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

Question

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

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

Answer 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();

Answer 2

В случае, если простое решение 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 является прямым потомком тела, иначе он тоже не будет работать.

Answer 3

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

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

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

Answer 4

Это может сработать, если iframe является прямым потомком тела

<style type="text/css" media="print">
   body *{display:none}
   iframe{display:block}
</style>