Javascript 在 IE 中打印 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7687936/
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
Print iframe in IE
提问by Ben Brocka
I have a button that loads a report for print into an "invisible" iframe inside a div and prints that iframe; the user presses a button to print the report (contained on a different page) without changing pages or any visual disruption aside from the print dialog. It works in Chrome and Firefox but not IE. In IE the parent page is printed in full, and a tiny messed up iframe is inserted at the bottom of the page (where I'm loading the iframe).
我有一个按钮，可以将要打印的报告加载到 div 内的“不可见”iframe 中并打印该 iframe；用户按下按钮即可打印报告（包含在不同页面上），而无需更改页面或除打印对话框外的任何视觉中断。它适用于 Chrome 和 Firefox，但不适用于 IE。在 IE 中，父页面被完整打印，并且在页面底部（我正在加载 iframe）插入了一个小小的混乱的 iframe。
Here's the empty div without content, it's there so I have an ID tagged place to style and stick content with Javascript:
这是一个没有内容的空 div，它在那里，所以我有一个带有 ID 标记的地方，可以使用 Javascript 设置样式和粘贴内容：
<div id="printerDiv"></div>
Here's the javascript function, onClick of my button this function fires and inserts my print page into an iframe inside printerDiv, after loading this page it prints:
这是javascript函数，我的按钮的onClick这个函数会触发并将我的打印页面插入到printerDiv内的iframe中，加载此页面后它会打印：
function printPage(url) {
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
</iframe>';
}
Here's the CSS hiding the div. I'm using absolute positioning to shift it off the visible screen area. I used to use display:none, but Firefox was unable to print iframes styled that way:
这是隐藏 div 的 CSS。我正在使用绝对定位将其移出可见屏幕区域。我曾经使用 display:none，但 Firefox 无法打印这种样式的 iframe：
#printerDiv{
position:absolute;
left:-9999px;
}
When I print in IE it prints the full page, and then at the bottom, where #printerDivis, I get this little iframe:
当我在 IE 中打印时，它会打印整页，然后在底部#printerDiv，我得到这个小 iframe：
So the content's being loaded, but it's not printing just the iframe, and it's not hiding the iframe properly either. Any other content I insert into #printerDivis hidden properly, only the iframe displays like that.
所以内容正在加载，但它不仅打印 iframe，也没有正确隐藏 iframe。我插入的任何其他内容#printerDiv都被正确隐藏，只有 iframe 像这样显示。
I've tried all solutions in this questionin my Javascript function: using self.print, using document.parentWindow.print, changing the styles on the printerDiv to 0px height/width doesn't work either.
我已经在我的 Javascript 函数中尝试了这个问题的所有解决方案：使用self.print, using document.parentWindow.print，将 printerDiv 上的样式更改为 0px 高度/宽度也不起作用。
I'm welcome to solutions that don't use iframes (IE seems to have massive issues with them) but I need this ability to load content not visible on screen and print it directly via a button.
我欢迎不使用 iframe 的解决方案（IE 似乎对它们有很大的问题），但我需要这种能力来加载屏幕上不可见的内容并通过按钮直接打印。
采纳答案by Einacio
you can try something like this:
你可以尝试这样的事情：
use something like jQuery's .load()to put the report inside the #printerDivand differenciate it with CSS
使用类似 jQuery 的.load()将报告放入其中#printerDiv并使用 CSS 对其进行区分
on your CSS you have
在你的 CSS 上
#printerDiv{display:none;}
@media print{
body *{display:none;}
#printerDiv{display:block;height:100%;width:100%}
}
and the print button javascript
和打印按钮 javascript
$('#printerDiv').empty().load(url, function(){
window.print();
}); //or whatever library/pure js you like
回答by HaukurHaf
In my case, the solution was to nothide the iframe I wanted to print. If I hide it (using display:none; visibility:hidden etc. ) the parent page would always print.
就我而言，解决方案是不隐藏我想打印的 iframe。如果我隐藏它（使用 display:none;visibility:hidden 等），父页面将始终打印。
Instead of actually hiding the frame, I just made it 10x10 and borderless. Now this works (with the delay trick).
我没有真正隐藏框架，而是将其设为 10x10 且无边框。现在这有效（使用延迟技巧）。
Example code:
示例代码：
<script type="text/javascript">
function printFrame(frameId, targetContent)
{
var doc = $('#'+frameId).get(0).contentWindow.document;
var $body = $('body',doc);
$body.html($('#'+targetContent).html());
setTimeout(function(){
$('#'+frameId).get(0).contentWindow.focus();
$('#'+frameId).get(0).contentWindow.print();
}, 1000);
}
</script>
HTML:
HTML：
<div id="contentToPrint">
I just want to print this stuff
</div>
<iframe src="about:blank" id="printframe" style="border:0" width="10" height="10"></iframe>
Button to print:
打印按钮：
<a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>
回答by Lorenzo Gangi
I had a the same problem with IE11. It seemed like IE was ignoring the .focus() call and instead printing the parent page as well as the iframe. My solution was to inject a style tag that hid everything except the iframe right before printing then removing the style after the call to print. My code is here http://ironlasso.com/print-only-lightbox-or-modal-window-content/
我在 IE11 上遇到了同样的问题。似乎 IE 忽略了 .focus() 调用，而是打印父页面和 iframe。我的解决方案是注入一个样式标签，在打印之前隐藏除 iframe 之外的所有内容，然后在调用打印后删除样式。我的代码在这里http://ironlasso.com/print-only-lightbox-or-modal-window-content/
回答by Ben
`<script>
function framePrint(whichFrame) {
parent[whichFrame].focus();
parent[whichFrame].print();
}
</script>`
<a href="javascript:framePrint('FRAMENAME');">Print</a>
<a href="javascript:framePrint('FRAMENAME');">Print</a>
Change FRAMENAME to the name of the frame that you wish to print.
将 FRAMENAME 更改为要打印的框架的名称。
回答by James Moberg
I was having the same issue recently with IE10, added a timeout and got the result I wanted, the iFrame printed out instead of the parent page:
我最近在使用 IE10 时遇到了同样的问题，添加了超时并得到了我想要的结果，打印的是 iFrame 而不是父页面：
<script type="text/javascript">
function selfPrint(){
self.focus();
self.print();
}
setTimeout('selfPrint()',2000);
</script>
