仅打印iFrame

Question

我正在研究案例解析系统，目前正在使用jquery颜色框向用户显示打开的任务列表。用户希望能够打印此列表，我想您可以通过添加从iframe中触发window.print的JavaScript链接在页面内部执行此操作。但是，我还要考虑用户可能从浏览器的菜单中选择打印。在这种情况下，如果颜色框是打开的，我只想打印其内容而不是上面的页面。

是否可以使用打印媒体CSS文件隐藏除iframed内容以外的所有内容？如果是这样，怎么能实现呢？如果做不到这一点，我将需要求助于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被命名为id'd内容。我的按钮位于一个名为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是身体的直接孩子

，这可能会有效

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