仅打印一个iFrame

我正在使用一个案例解析系统，并且正在使用jquery colorbox向用户显示打开的任务列表。用户希望能够打印这个列表，我想你可以从页面内部通过添加一个JavaScript链接来从iframe中触发window.print。但是，我也必须考虑可能从浏览器菜单中选择打印的用户。在这种情况下，如果彩盒是开放的，我只想打印它的内容而不是覆盖页面。仅打印一个iFrame

是否可以使用打印介质CSS文件隐藏除了iframed内容以外的所有内容？如果是这样，这怎么能实现呢？否则，我需要使用JavaScript，那么可以在JavaScript中实现效果吗？

来源

2010-11-04 GordonM

在我得出的结论是，iframe的是更多的麻烦比它的价值到底。我在div模式下使用colorbox，并在正在提取的页面中添加一些逻辑，以确定它是应该呈现整个HTML页面还是仅显示我感兴趣的数据。使用div来打印页面样式的问题远没有问题比使用iframe – GordonM 2010-11-05 12:59:41

[从父窗口打印动态创建的iframe的内容]的可能副本（http://stackoverflow.com/questions/831147/printing-contents-of-a-dynamically-created-iframe-from-parent -window） – 2017-03-10 01:15:38

-1

如果iframe是身体

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

来源

2010-11-04 12:18:46

从快速测试这没有奏效，“*”优先，我会放一些我写的快速JS。 – 2010-11-04 12:42:25

（* iframe）并调整iframe的宽度/高度以获得最大结果;） – BGerrissen 2010-11-04 12:42:26

@ShadowWizard'！important'总是一个选项。 – TWiStErRob 2015-08-12 12:51:18

的直接孩子万一纯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是身体的直接孩子，否则它赢得”不管工作。

来源

2010-11-04 12:46:36

即使客户端使用浏览器的打印菜单项，我发现了一种只打印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; 
}

来源

2011-09-29 21:00:33

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

来源

2012-03-10 16:46:07

谢谢，这为我做了诡计。 – David 2013-04-19 04:48:15

仅打印一个iFrame

回答

相关问题