打印没有托管页面滚动条的 iframe 内容答案

【问题标题】：Printing contents of iframe without hosted page's scrollbar打印没有托管页面滚动条的 iframe 内容
【发布时间】：2015-04-13 23:31:26
【问题描述】：

单击一个按钮，它会运行 PrintInvoice，它使用 jquery printElement（嗯，1.2 版）打开一个窗口，其中 div 包含一个按钮和一个 iframe，以及打印对话框：

    <script type="text/javascript" language="javascript">
        function PrintInvoice() {
            $('DIV#EInvoice').printElement({
                printMode: 'popup',
                leaveOpen: true,
            });
        }
</script>

其中相关元素如下：

<div id="EInvoiceWrapper">
            <div id="EInvoice" style="overflow: hidden">
                <center>
                    <a style="display: block; width: 100%; height: 100%; background: url(API/OAL/img/btnCloseWindow.jpg) no-repeat top center;"
                        href="javascript: window.close()"></a>
                </center>
                <br />
                 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;"></iframe>
            </div>
        </div>

正确弹出一个包含 EInvoice div 内容的窗口并加载打印对话框，但托管页面显示一个垂直滚动条。

当然会在打印文档中呈现。我需要在没有滚动条的情况下打印此页面（我对它是否显示在弹出窗口中无动于衷。）目前用户取消了“打印”对话框，右键单击实际发票，然后从那里打印（这样做了正确没有滚动条）。

我尝试过的事情：在 iframe 上设置高度，在 div 上设置高度，将不同的设置传递给 printElement printBodyOptions，大约一百万个其他事情。

我认为我需要做的是让 iframe 中托管的页面扩展到其全高，因此它不需要显示滚动条。我无法控制托管的 OrderInvoice.aspx。

我该怎么做？或者还有什么其他方法可以隐藏滚动条？

【问题讨论】：

你还没有找到这篇文章 - Remove scrollbar from iframe吗？似乎下面的答案将重申这里已经提出的观点。我假设你做到了，那么不幸的是我也认为@Neaox 的答案是正确的。
我认为他们在谈论实际 iframe 上的滚动？我的问题是 iframe 中托管的页面。

标签： javascript jquery iframe

【解决方案1】：

您不能将样式应用于 iframe 中的文档，因为它位于不同的域中。沙盒可以防止这种情况。为了实现您的要求，我的建议是缩小 iframe 宽度，以便隐藏滚动条。

编辑：另一种解决方案可能是保持 iframe 宽度不变并将 iframe 包装在另一个元素中（就像您对 #EInvoice 元素所做的那样）并让该包装元素的宽度小于 iframe（15px 或所以小于 iframe 的宽度，你将不得不使用这个宽度差异来找到正确的值）并将溢出隐藏应用于元素（就像你对 #EInvoice 元素所做的那样）。这将切断右侧的滚动条。

<div id="EInvoiceWrapper">
            <div id="EInvoice" style="width:575px;overflow: hidden">
                <center>
                    <a style="display: block; width: 100%; height: 100%; background: url(API/OAL/img/btnCloseWindow.jpg) no-repeat top center;"
                        href="javascript: window.close()"></a>
                </center>
                <br />
                 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;"></iframe>
            </div>
        </div>

【讨论】：

啊哈！使 iframe 变窄没有用，但它让我走上了正确的轨道。相反，我把它变宽了，然后使用了 margin-right: -60px;关于 iframe 的样式。

【解决方案2】：

很久以前我遇到过类似的问题，这就是我尝试过的。我几乎不记得我是如何/为什么想出这个的，但仍然会在这里分享： 我的 iframe：

<div style="text-align:center; width:800px; margin:0 auto;">
<iframe id="MyView" runat="server" frameborder="0" marginheight="0" marginwidth="0" style="height:800px; width:800px"></iframe>
</div>

//一些操纵高度的js函数

$(function () {
    $("#MyView").load(function () { frameheight(); });
});
function frameheight() {
    var iFrame = document.getElementById("MyView");
    var iFrameBody;
    if (iFrame.contentDocument) {
        iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    }
    else if (iFrame.contentWindow) {
        iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    resizeIframe(iFrameBody.scrollHeight);

}

function resizeIframe(height) {
    $("#MyView").height(parseInt(height) + 60);
}

注意：我在 asp.net 网页表单页面中使用它。

【讨论】：

【解决方案3】：

您可以使用媒体查询专门为文档设置样式

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

这里有一个decent article 可能会有所帮助。

虽然您无法设置托管文档的样式，但您可以设置 iframe 的样式，使其高度足以打印托管文档而无需滚动条。

【讨论】：

【解决方案4】：

试试这个：

 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;" style="overflow: hidden"></iframe>

【讨论】：