Question

前段时间我使用jQuery创建了一个灯箱插件，它将链接中指定的URL加载到灯箱中。代码非常简单：

$('.readmore').each(function(i){
    $(this).popup();
});

，链接看起来像这样：

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

该插件还可以接受宽度，高度，不同网址以及更多数据传递的参数。

我现在面临的问题是打印灯箱。我进行了设置，以便灯箱的顶部有一个打印按钮。该链接将打开一个新窗口并打印该窗口。这一切都是由灯箱插件控制的。这是代码的样子：

$('.printBtn').bind('click',function() {
    var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
    var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
    thePopup.print();
});

问题是脚本似乎没有等到窗口加载。它想要在窗口出现的那一刻打印。因此，如果我单击“取消”到打印对话框，它将一次又一次地弹出，直到窗口加载。我第一次尝试打印时，得到了一个空白页面。这可能是因为窗口没有完成加载。

我需要找到一种方法来改变之前的代码块，等到窗口加载然后再打印。我觉得应该有一个简单的方法来做到这一点，但我还没有找到它。要么是这样，要么我需要找到一种更好的方法来打开弹出窗口并从父窗口中的灯箱脚本打印，而无需在弹出窗口中交替使用网页代码。

Answer 1

您应该将print函数放在view-details.php文件中，并在使用<body onload="window.print()">或$(document).ready(function () { window.print(); });

加载文件后调用它

Answer 2

知道了！我在这里找到了一个想法

http://www.mail-archive.com/discuss@jquery.com/msg18410.html

在此示例中，他们将空白弹出窗口加载到对象中，克隆要显示的元素的内容，并将其附加到对象的主体。由于我已经知道视图详细信息的内容（或者我在灯箱中加载的任何页面），我只需要克隆该内容并将其加载到对象中。然后，我只需要打印该对象。最终结果如下：

$('.printBtn').bind('click',function() {
    var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
    $('#popup-content').clone().appendTo( thePopup.document.body );
    thePopup.print();
});

我有一个小缺点，我在view-details.php中使用的样式表使用的是相对链接。我不得不将其更改为绝对链接。原因是窗口没有与之关联的URL，因此没有相对位置可以绘制。

适用于Firefox。我也需要在其他一些主流浏览器中测试它。

当您处理图片，视频或其他流程密集型解决方案时，我不知道此解决方案的效果如何。虽然，在我的情况下，它的效果非常好，因为我只是加载表格和文本值。

感谢您的投入！你给了我一些如何解决这个问题的想法。

Answer 3

您确定无法在弹出窗口中更改HTML吗？

如果可以，请在弹出式HTML的结束处添加<script>标记，然后在其中调用window.print()。然后在加载HTML之前不会调用它。

使用JQuery打开弹出窗口并打印

3 个答案: