Question

[此问题的简化版：]

为什么iFrames有时会拒绝打印？例如，在这两个页面上点击print preview：

http://fiddle.jshell.net/gJDv4/1/show/
http://fiddle.jshell.net/gJDv4/2/show/

在打印预览中，iFrame在第一个示例中可见，但在第二个示例中隐藏。 first和second iFrame之间的仅代码差异是CSS属性（margin: 20px;）已添加到第二个示例中的iFrame中。

[长（原创）版本：]

我正在构建一个预览/打印页面，它汇集了一堆引用自己的样式表和javascript文件的独立HTML文件。

http://jsfiddle.net/GJKkm/16/

这个想法是所有文件都显示在iFrames中进行预览，然后在打印时，每个iFrame（可能会跨越多个页面）打印出来就好像是它自己的文档一样。

但是，当我打印（或打印预览）iFrames没有显示任何内容，或者他们只打印第一页时，截断iFrame的剩余页面。

http://fiddle.jshell.net/GJKkm/16/show/（使用此链接进行打印预览，而不是上面的那个）

iFrames打印（并打印预览）就好了，然后才将它们打成多页：

http://fiddle.jshell.net/GJKkm/7/show/

这种行为的原因是什么？

Answer 1

您可以通过调用其窗口上的print()功能在各个iframe中打印文档....

这样打印文件2：

$('#iframeTwo')[0].contentWindow.print()

这里有一个jsfiddle，我添加了触发单个打印的按钮......

http://jsfiddle.net/sg3s/GJKkm/17/

为什么浏览器在打印父文档时不会在iframe中打印内容。可能必须要做的事情是，这些文件实际上并不是他们所展示的文件的一部分......把它想象成一个单独的窗口（你可以用window.open()生成一个窗口js）但随后巧妙地入侵主文档，视口仅限于iframe上指定的任何魔法。

Answer 2

我想出了一种解决方法。

目标是通过使用javascript操纵DOM，将所有iframe的内容放入父窗口。

使用这种解决方案，您甚至可以避免iframe超过一页时被切断的问题。

代码如下：

<script>

 pages =[] // initiate an empty list here

function printPage() {

var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){ 
   pages.push(frames[i].contentWindow.document.body.innerHTML); 
;
}
if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the concatenated iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

通过此操作，您仅获得一个打印对话框即可打印所有iframe。

请记住，在您的父页面HTML中，您将具有下面的代码来调用printPage函数。

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />

无法打印iFrame

2 个答案: