javascript 仅打印 iFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4096491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Printing just an iFrame
提问by GordonM
I'm working on a case resolution system, and am currently using a jquery colorbox to display a list of open tasks to the user. Users want to be able to print this list, and I guess you can do it from within the page itself by adding a JavaScript link that triggers window.print from within the iframe. However, I've also got to account for users possibly selecting print from the browser's menu. In that case, if the colorbox is open, I just want to print its contents and not the overlying page.
我正在研究案例解析系统，目前正在使用 jquery 颜色框向用户显示打开的任务列表。用户希望能够打印此列表，我想您可以通过添加一个 JavaScript 链接从 iframe 中触发 window.print 来从页面本身内完成。但是，我还必须考虑到可能从浏览器菜单中选择打印的用户。在这种情况下，如果颜色框是打开的，我只想打印它的内容而不是覆盖的页面。
Is it possible to hide everything except for the iframed content using a print media CSS file? If so, how can this be achieved? Failing that, I'll need to resort to JavaScript, so would achieving the effect in JavaScript be possible?
是否可以使用印刷媒体 CSS 文件隐藏除 iframe 内容之外的所有内容？如果是这样，如何实现？如果不行，我就需要求助于JavaScript，那么在JavaScript中实现效果可能吗？
采纳答案by Dr.Molle
This could work if the iframe is a direct child of body
如果 iframe 是 body 的直接子级，这可能会起作用
<style type="text/css" media="print">
body *{display:none}
iframe{display:block}
</style>
回答by Fareed Alnamrouti
// 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();
回答by Shadow Wizard is Ear For You
In case the pure CSS solution will fail (didn't work for me but maybe I just missed something) you can have combined solution of CSS and JavaScript. First have this:
如果纯 CSS 解决方案失败（对我不起作用，但也许我只是错过了一些东西），您可以结合使用 CSS 和 JavaScript 的解决方案。首先有这个：
<style type="text/css" media="print">
.hideonprint { display:none; }
</style>
Then such JavaScript will cause all content to be hidden when printing, except your frame:
然后这样的 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>
This also assume the iframe is direct child of the body otherwise it won't work either.
这也假设 iframe 是 body 的直接子级，否则它也不会工作。
回答by Sinthia V
I have found a method that works to print just the IFrame's content even if the client uses the browser's print menu item, but I couldn't tell you why that is. The trick is to set the focus to the IFrame before printing. The print stylesheet is needed too, although the javascript seems to be what is happening when the user prints from the menu. You need both parts for it to work. It prints the entire document, even if it is larger than the IFrame! I have successfully tested it in IE8, Firefox 5 and 6 and Safari 3.2.
我找到了一种方法，即使客户端使用浏览器的打印菜单项，也可以只打印 IFrame 的内容，但我无法告诉您为什么会这样。诀窍是在打印之前将焦点设置为 IFrame。也需要打印样式表，尽管 javascript 似乎是用户从菜单打印时发生的事情。您需要这两个部分才能使其工作。它会打印整个文档，即使它比 IFrame 大！我已经在 IE8、Firefox 5 和 6 以及 Safari 3.2 中成功测试了它。
I use this script as a handler for an onclick event for a button or "print me" link:
我将此脚本用作按钮或“打印我”链接的 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>
The IFrame in question is named and id'd content. My button is in a div called print_iframe The browser sniffing is essential! Then I use a print only stylesheet linked in like this:
有问题的 IFrame 被命名和 ID 的内容。我的按钮在一个叫做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;
}
