仅打印 iFrame

Question

我正在开发一个案例解决系统，目前正在使用 jquery colorbox 向用户显示打开的任务列表。用户希望能够打印此列表，我想您可以通过添加从 iframe 中触发 window.print 的 JavaScript 链接在页面本身内完成此操作。但是，我还必须考虑到用户可能从浏览器的菜单中选择打印。在这种情况下，如果颜色框是打开的，我只想打印它的内容而不是覆盖的页面。

是否可以使用打印媒体 CSS 文件隐藏除 iframe 内容之外的所有内容？如果是这样，如何实现？如果做不到这一点，我将需要求助于 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 是 body 的直接子级，否则它也不起作用。

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 是命名和标识的内容。我的按钮在一个名为 print_iframe 的 div 中浏览器嗅探是必不可少的！ 然后我使用像这样链接的仅打印样式表：

<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 是 body 的直接子级，这可能会起作用

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