使用JQuery打开一个弹出窗口并打印答案

【问题标题】：Using JQuery to open a popup window and print使用JQuery打开一个弹出窗口并打印
【发布时间】：2011-02-05 21:41:19
【问题描述】：

不久前，我使用 jQuery 创建了一个灯箱插件，它将链接中指定的 url 加载到灯箱中。代码很简单：

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

链接看起来像这样：

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

该插件还可以接受宽度、高度、不同的 url 和更多要传递的数据的参数。

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

$('.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();
});

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

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

【问题讨论】：

标签： javascript jquery printing popup lightbox

【解决方案1】：

您应该将打印功能放在 view-details.php 文件中，并在文件加载后调用它，方法是使用

<body onload="window.print()">

或

$(document).ready(function () { 
  window.print(); 
});

【讨论】：

好吧，我正在尝试在不向 view-details.php 文件中添加代码的情况下执行此操作，因为该文件不需要知道它正在被打印。这样我就不必为加载到灯箱中的每个文件添加代码片段。
如果您在 Lightbox 中加载 window.open，为什么要使用它？如果您使用 jQuery 通过 AJAX 加载 HTML，您可以使用 jQuery 中的 .load() 函数并通过 onSuccess 回调触发打印。
因为我不能用灯箱很好地打印。我周围都是黑色的背景。它在自己的窗口中看起来和打印更好。这是一个有趣的想法，使用 .load()，但我不希望在灯箱加载后立即打印内容。只有当用户单击打印链接时，我才希望打印该框。
您可以禁用打印按钮并在 .load() onSuccess 回调中启用它，以确保在页面加载之前没有人打印。

【解决方案2】：

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

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

在这个例子中，他们将一个空白弹出窗口加载到一个对象中，克隆要显示的元素的内容，并将其附加到对象的主体中。由于我已经知道 view-details 的内容（或我在灯箱中加载的任何页面），我只需要克隆该内容并将其加载到一个对象中。然后，我只需要打印那个对象。最终结果如下所示：

$('.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 中工作。我也需要在其他一些主流浏览器中测试它。

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

感谢您的意见！你给了我一些关于如何解决这个问题的想法。

【讨论】：

【解决方案3】：

您确定不能更改弹出窗口中的 HTML 吗？

如果可以，在弹出窗口的 HTML 的 end 处添加一个<script> 标签，并在其中调用window.print()。然后在加载 HTML 之前不会调用它。

【讨论】：

我不想更改弹出窗口中的 html 代码...但也许我可以将 onload="window.print()" 附加到正在加载的 html...让我稍微考虑一下这个想法