代码之家 › 专栏 › 技术社区 › GordonM

只打印一个iframe

iframe printing css html javascript

GordonM · 技术社区 · 14 年前

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

是否可以使用打印媒体CSS文件隐藏除iframed内容之外的所有内容?如果是这样,如何实现这一目标?如果失败了,我需要使用javascript,那么在javascript中实现效果是可能的吗?

4 回复 | 直到 8 年前

-1

Dr.Molle 14 年前

如果iframe是body的直接子级,这可能有效。

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

Fareed Alnamrouti 8 年前

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

Shadow Wizard 14 年前

如果纯粹的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是主体的直接子代,否则它也不会工作。

Sinthia V 13 年前

我发现了一种方法,即使客户端使用浏览器的“打印”菜单项,也可以只打印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的分区中,浏览器嗅探非常重要! 然后我使用一个只打印的样式表链接如下:

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