Question

我在SO中使用上一个问题来帮助我使用这个“在新窗口中打开”javascript函数：

所以我的目标是在新窗口中打开内联div，然后能够打印新窗口（我想在新窗口中打开的div是优惠券）。

我已经完成了div的样式（看起来像优惠券）并设置了javascript，以便div确实在新窗口中打开，但是

1）...我无法将样式表链接到新窗口

2）...而且，我无法打开新窗口（当我点击打印新窗口时没有任何反应 - 但是当我关闭新窗口时，会出现打印对话框。

这是我到目前为止使用的代码，非常感谢任何帮助：

$('#printCoupon').bind('click', function () {
    var printContents = new $("#coupon").clone();           
    var myWindow = window.open("", "popup", "width=600,height=380,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
    var doc = myWindow.document;
    doc.open();
$(printContents).find("#printCoupon").remove();
    doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    doc.write("<html>");
    doc.write("<head>");
    doc.write("<link href='http://[link-to-css]/css/coupon.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
    doc.write("</head>");
    doc.write("<body>");
    doc.write($(printContents).html());
    doc.write("</body>");
    doc.write("</html>");
});

和我的HTML：

<div id="couponWrap">
    <div id="coupon">
        <h3>Coupon Title</h3>
        <p>Present this coupon and receive $10 off labor on your first service visit and 2% loyalty points on you next visit.</p>
    </div>
        <a href="javascript:;" id="printCoupon">Click to print this coupon.</a>
</div>

谢谢你，辛迪

Answer 1

就写作而言，请尝试以下操作（已移除doc.open()并删除popup参数）：

$('#printCoupon').bind('click', function () {
    var printContents = new $("#coupon").clone();           
    var myWindow = window.open("", "", "width=600,height=380,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
    var doc = myWindow.document;
$(printContents).find("#printCoupon").remove();
    doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    doc.write("<html>");
    doc.write("<head>");
    doc.write("<link href='http://[link-to-css]/css/coupon.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
    doc.write("</head>");
    doc.write("<body>");
    doc.write($(printContents).html());
    doc.write("</body>");
    doc.write("</html>");
});

Answer 2

根据您的样式是否特定于元素@media print，您是否检查过任何问题？回到您给出的基于示例的参考文献。有人评论过这个 - 也许这是你的问题：

这取决于div的样式。如果应用了样式   根据ID或类，你应该可以包括   新窗口中的相同样式表。但是，如果有任何风格   基于元素的祖先，它会像你一样变得棘手   必须复制祖先元素才能获得确切的样式   应用。

听起来你应该使用特定于打印的样式。您可以   应用样式表仅通过包含media =“screen”进行打印   样式表链接上的属性。然后这个样式表负责   用于隐藏页面中您不想打印的任何元素   定位你做的那些。这样你就不会受到影响   弹出窗口阻止程序，并为用户减少打印文档的步骤。

Answer 3

到目前为止，这是我的解决方案 - 当在新窗口中打开时，javascript从HTML中删除了div，所以我只是将div重新编写回新窗口：

（当内联DIV在同一网页上时，是否有人知道如何编写javascript以在新窗口中打开多个内联DIV？我需要动态生成ID，我相信下面的代码和HTML。）

    $('#printCoupon').bind('click', function () {
var printContents = new $("#coupon").clone();           
var myWindow = window.open("width=600,height=380");
var doc = myWindow.document;
    $(printContents).find("#printCoupon").remove();
doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
doc.write("<html>");
doc.write("<head>");
doc.write("<link href='http://linktocssfile.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
doc.write("</head>");
doc.write("<body>");
doc.write("<div id='coupon'>");
doc.write($(printContents).html());
doc.write("</div>");
doc.write("</body>");
doc.write("</html>");
});

使用javascript在新窗口中打开内联div

3 个答案: