Question

这是我的代码

<script>
var body = "dddddd"    
var script = "<script>window.print();</scr'+'ipt>";

var newWin = $("#printf")[0].contentWindow.document; 
newWin.open();
newWin.close();

$("body",newWin).append(body+script);

</script>
<iframe id="printf"></iframe>

这样可以，但它会打印父页面，如何让它只打印iframe？

Answer 1

我不希望这样做

尝试改为

window.frames["printf"].focus();
window.frames["printf"].print();

并使用

<iframe id="printf" name="printf"></iframe>

或者尝试好旧的

var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();

如果jQuery无法破解它

Live Demo

Answer 2

document.getElementById("printf").contentWindow.print();

Same origin policy适用。

Answer 3

简单的方法（在ie7 +，firefox，Chrome，safari上测试）就是这个

//id is the  id of the iframe
function printFrame(id) {
            var frm = document.getElementById(id).contentWindow;
            frm.focus();// focus on contentWindow is needed on some ie versions
            frm.print();
            return false;
}

Answer 4

替代选项，可能适用也可能不适用，但如果是，则更清晰：

如果您始终只想从页面打印iframe，则可以使用单独的“@media print {}”样式表来隐藏除iframe之外的所有内容。然后你可以正常打印页面。

Answer 5

您可以使用此命令：

document.getElementById('iframeid').contentWindow.print();

这个命令基本上与window.print（）相同，但是我们想要打印的窗口在iframe中，我们首先需要获取该窗口的一个实例作为javascript对象。

因此，在参考iframe时，我们首先使用它的id来获取iframe，然后它的contentWindow返回一个窗口（DOM）对象。因此，我们可以直接在此对象上使用window.print（）函数。

Answer 6

我在IE8中遇到了上述所有解决方案的问题，找到了一个在IE 8 + 9，Chrome，Safari和Firefox中测试的不错的解决方法。对于我的情况，我需要打印一个动态生成的报告：

// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';

请注意body关闭标记之前的printPage（）javascript方法。

接下来创建iframe并将其附加到父主体，以使其contentWindow可用：

var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);

接下来设置内容：

newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';

这里我们将动态内容变量设置为iframe的窗口对象，然后通过javascript：scheme调用它。

最后打印;关注iframe并在iframe内容中调用javascript printPage（）函数：

newIframe.focus();
setTimeout(function() {
  newIframe.contentWindow.printPage();
}, 200);
return;

不一定需要setTimeout，但是如果您正在加载大量内容，我发现Chrome偶尔无法打印，因此建议执行此步骤。另一种方法是包装'newIframe.contentWindow.printPage（）;'在try catch中将setTimeout包装的版本放在catch块中。

希望这有助于某些人，因为我花了很多时间找到一个在多个浏览器中运行良好的解决方案。感谢SpareCycles。

修改

不使用setTimeout调用printPage函数，而是使用以下代码：

newIframe.onload = function() { newIframe.contentWindow.printPage(); }

Answer 7

此时，iframe中不需要脚本标记。这对我有用（在Chrome，Firefox，IE11和node-webkit 0.12中测试）：

<script>
window.onload = function() {
    var body = 'dddddd';
    var newWin = document.getElementById('printf').contentWindow;
    newWin.document.write(body);
    newWin.document.close(); //important!
    newWin.focus(); //IE fix
    newWin.print();
}
</script>

<iframe id="printf"></iframe>

感谢所有答案，请保存我的一天。

Answer 8

如果您使用javascript document.write()设置IFrame的内容，则必须按newWin.document.close();关闭文档，否则以下代码将无效，打印将打印整页内容而不是仅IFrame内容。

var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();

Answer 9

将此代码用于IE9及更高版本：

window.frames["printf"].focus();
window.frames["printf"].print();

对于IE8：

window.frames[0].focus();
window.frames[0].print();

Answer 10

我被困在打字稿中尝试实现此功能，以上所有方法均无效。我必须首先强制转换元素，以便打字稿可以访问contentWindow。

let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();

Answer 11

我想知道你做iframe打印的目的是什么。

我刚才遇到了类似的问题：使用chrome的打印预览生成iframe的PDF文件。

最后我用一招来解决了我的问题：

＆＃13;

$('#print').click(function() {
    $('#noniframe').hide(); // hide other elements
    window.print();         // now, only the iframe left
    $('#noniframe').show(); // show other elements again.
});

＆＃13;

Javascript仅打印iframe内容

11 个答案: