Javascript 使用 JQuery 打开弹出窗口并打印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2603465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JQuery to open a popup window and print
提问by TJ Kirchner
A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple:
不久前，我使用 jQuery 创建了一个灯箱插件，该插件会将链接中指定的 url 加载到灯箱中。代码非常简单：
$('.readmore').each(function(i){
$(this).popup();
});
and the link would look like this:
链接如下所示：
<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>
The plugin could also accept arguments for width, height, a different url, and more data to pass through.
该插件还可以接受宽度、高度、不同的 url 和更多要传递的数据的参数。
The problem I'm facing right now is printing the lightbox. I set it up so that the lightbox has a print button at the top of the box. That link would open up a new window and print that window. This is all being controlled by the lightbox plugin. Here's what that code looks like:
我现在面临的问题是打印灯箱。我进行了设置，以便灯箱顶部有一个打印按钮。该链接将打开一个新窗口并打印该窗口。这一切都由灯箱插件控制。下面是代码的样子：
$('.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();
});
The problem is the script doesn't seem to be waiting until the window loads. It wants to print the moment the window appears. As a result, if I click "cancel" to the print dialog box, it'll popup again and again until the window loads. The first time I tried printing I got a blank page. That might be because the window didn't finish load.
问题是脚本似乎没有等到窗口加载。它想在窗口出现的那一刻打印。因此，如果我在打印对话框中单击“取消”，它会一次又一次地弹出，直到窗口加载。第一次尝试打印时，我得到了一个空白页。那可能是因为窗口没有完成加载。
I need to find a way to alter the previous code block to wait until the window loads and then print. I feel like there should be an easy way to do this, but I haven't found it yet. Either that, or I need to find a better way to open a popup window and print from the lightbox script in the parent window, without alternating the webpage code in the popup window.
我需要找到一种方法来更改前一个代码块以等待窗口加载然后打印。我觉得应该有一个简单的方法来做到这一点，但我还没有找到。要么，要么我需要找到一种更好的方法来打开弹出窗口并从父窗口中的灯箱脚本打印，而无需在弹出窗口中交替网页代码。
回答by Ivo Sabev
You should put the print function in your view-details.php file and call it once the file is loaded, by either using
您应该将打印功能放在 view-details.php 文件中，并在文件加载后调用它，方法是使用
<body onload="window.print()">
or
或者
$(document).ready(function () {
window.print();
});
回答by TJ Kirchner
Got it! I found an idea here
知道了！我在这里找到了一个想法
http://www.mail-archive.com/[email protected]/msg18410.html
http://www.mail-archive.com/[email protected]/msg18410.html
In this example, they loaded a blank popup window into an object, cloned the contents of the element to be displayed, and appended it to the body of the object. Since I already knew what the contents of view-details (or any page I load in the lightbox), I just had to clone that content instead and load it into an object. Then, I just needed to print that object. The final outcome looks like this:
在这个例子中，他们将一个空白的弹出窗口加载到一个对象中，克隆了要显示的元素的内容，并将其附加到对象的主体中。由于我已经知道查看详细信息（或我在灯箱中加载的任何页面）的内容，我只需要克隆该内容并将其加载到一个对象中。然后，我只需要打印那个对象。最终结果如下所示：
$('.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();
});
I had one small drawback in that the style sheet I was using in view-details.php was using a relative link. I had to change it to an absolute link. The reason being that the window didn't have a URL associated with it, so it had no relative position to draw on.
我有一个小缺点，我在 view-details.php 中使用的样式表使用的是相对链接。我不得不将其更改为绝对链接。原因是该窗口没有与之关联的 URL，因此它没有可绘制的相对位置。
Works in Firefox. I need to test it in some other major browsers too.
在 Firefox 中工作。我也需要在其他一些主要浏览器中测试它。
I don't know how well this solution works when you're dealing with images, videos, or other process intensive solutions. Although, it works pretty well in my case, since I'm just loading tables and text values.
当您处理图像、视频或其他流程密集型解决方案时，我不知道该解决方案的效果如何。虽然，它在我的情况下工作得很好，因为我只是加载表格和文本值。
Thanks for the input! You gave me some ideas of how to get around this.
感谢您的输入！你给了我一些如何解决这个问题的想法。
回答by Stuart Sierra
Are you sure you can't alter the HTML in the popup window?
您确定不能更改弹出窗口中的 HTML 吗？
If you can, add a <script>tag at the endof the popup's HTML, and call window.print()inside it. Then it won't be called until the HTML has loaded.
如果可以，请在弹出窗口的 HTML末尾添加一个<script>标记，并在其中调用。然后在加载 HTML 之前不会调用它。window.print()
