jQuery 的 onbeforeprint 和 onafterprint 事件（跨浏览器事件）答案

【问题标题】：onbeforeprint and onafterprint event for jQuery (crossbrowser event)jQuery 的 onbeforeprint 和 onafterprint 事件（跨浏览器事件）
【发布时间】：2011-05-11 23:53:26
【问题描述】：

我需要一个与 jQuery 上的 onbeforeprint 和 onafterprint 等效的 jQuery 事件，它与跨浏览器兼容。

我不能在 CSS 上使用 @media print，因为我需要从文档中删除一些类，并在完成打印时将这些类添加回来。

【问题讨论】：

你有一个到目前为止你尝试过的例子吗？
[是否有办法跟踪用户是否打印网页？ ](stackoverflow.com/questions/2148145/…)
@Pekka +1 表示重复，@Cesar +1 表示半正确的评论。 IE支持onbeforeprint、onafterprint——其他浏览器不支持
@cesar @starter 有趣的行为...你们共享 IP 并回答/接受彼此的问题，而丝毫没有暗示你们彼此认识。现在，@Nick 向@Cesar 提出了一个问题，尽管他与这个问题无关，而且他奇迹般地出现了！这是非常奇怪的行为......
DUN DUN DUNNNNN 剧情变厚了……

标签： jquery css printing

【解决方案1】：

Firefox 7 支持 onbeforeprint 和 onafterprint 事件 https://developer.mozilla.org/en/DOM/DOM_event_reference

【讨论】：

【解决方案2】：

为什么@media 不能打印出这样的声明？：

.hide-on-print {
  display: none;
}

或者，您可以使用这个 jquery 插件：http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/，只需在 div 中设置打印文档并打印，但这需要打印链接。可以在屏幕外创建一个 div 并将其加载到您要打印的内容中，然后使用 jquery 打印该 div。 Blowsie 的回答基本上是在一个新的临时浏览器窗口中执行此操作。但是，这种方法听起来像是一些繁重的 JS 提升，并且会延迟打印功能的性能，直到 javascript 完成执行。同样，所有这些 javascript 解决方案都需要打印链接才能工作——如果用户执行 File->Print 或 Ctrl+P，它们将无法工作。

如果您尝试使用 JavaScript 捕获 Print 事件，则只能在 IE 中通过使用 window.onBeforePrint 和 window.onAfterPrint 来完成，您已经知道了。目前无法在 Mozilla 和 Webkit 浏览器中捕获此事件。对于打印样式，他们推荐@media css，并且不相信通过 javascript 干扰打印功能。

我强烈推荐前一种方法——css。它是最兼容跨浏览器和最可预测的。您的样式将仅在打印时应用，并且不会在浏览器中可见，仅在打印页面上可见。使用 javascript/jquery 方法，用户可能会得到一闪而过的内容样式变化（或者在 Blowsie 的示例中，看到一个弹出窗口或更糟，禁用弹出窗口并且该方法失败），并且在错误的用户体验和打印功能不一致。

这个问题很常见，这里也有回答：Javascript Event Handler for Print

【讨论】：

【解决方案3】：

如果你要使用这样的打印功能，你可以随心所欲……

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1000,height=650');
            a.document.open("text/html");
            a.document.write('<html><head>');
            a.document.write('<link rel="stylesheet" href="css/default.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write('</head><body><br/>');
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

【讨论】：

如果您需要对此进行扩展，请告诉我