javascript - 在 IE 中打印 iframe

Question

我有一个按钮，可以将要打印的报告加载到 div 内的“不可见”iframe 中并打印该 iframe；用户按下按钮打印报告(包含在不同的页面上)，而无需更改页面或除了打印对话框之外的任何视觉中断。它适用于 Chrome 和 Firefox，但不适用于 IE。在 IE 中，父页面被完整打印，并且在页面底部(我正在加载 iframe 的地方)插入了一个困惑的 iframe。

这是没有内容的空 div，它就在那里，所以我有一个 ID 标记的地方来设置样式并使用 Javascript 粘贴内容:

<div id="printerDiv"></div>

这是 javascript 函数，单击我的按钮时，此函数将触发并将我的打印页面插入到 printerDiv 内的 iframe 中，加载此页面后，它会打印:

function printPage(url) {
    var div = document.getElementById("printerDiv");
    div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
        </iframe>';
 }

这是隐藏 div 的 CSS。我正在使用绝对定位将其移出可见屏幕区域。我曾经使用 display:none，但 Firefox 无法打印这种样式的 iframe:

#printerDiv{
    position:absolute;
    left:-9999px;
}

当我在 IE 中打印时，它会打印整页，然后在底部，也就是 #printerDiv 所在的位置，我得到了这个小 iframe:

所以内容正在加载，但它不只是打印 iframe，也没有正确隐藏 iframe。我插入到 #printerDiv 中的任何其他内容都被正确隐藏，只有 iframe 会这样显示。

我已经尝试了 this question 中的所有解决方案在我的 Javascript 函数中:使用 self.print，使用 document.parentWindow.print，将 printerDiv 上的样式更改为 0px 高度/宽度也不起作用。

我欢迎使用不使用 iframe 的解决方案(IE 似乎有很多问题)，但我需要这种能力来加载屏幕上不可见的内容并通过按钮直接打印。

Answer 1

在我的例子中，解决方案是不隐藏我想打印的 iframe。如果我隐藏它(使用 display:none; visibility:hidden 等)，父页面将始终打印。

我没有真正隐藏框架，而是将其设为 10x10 且无边框。现在这有效(使用延迟技巧)。

示例代码:

    <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:

<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>

打印按钮:

<a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>