javascript - 在没有托管页面滚动条的情况下打印 iframe 的内容

Question

单击一个按钮，它会运行 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。

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

Answer 1

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

编辑:另一种解决方案可能是保持 iframe 宽度不变，并将 iframe 包装在另一个元素中(就像您对 #EInvoice 元素所做的那样)，并为该包装元素提供更小的宽度比 iframe 小(比 iframe 的宽度小 15px 左右，你将不得不使用这个宽度差异来找到正确的值)并将溢出隐藏到元素(就像你对 #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>