如何在 Javascript window.print() 调用的默认打印菜单上捕获点击事件？答案

【问题标题】：How to capture the click event on the default print menu called by Javascript window.print()?如何在 Javascript window.print() 调用的默认打印菜单上捕获点击事件？
【发布时间】：2015-11-05 09:27:16
【问题描述】：

我已经使用 window.print() 构建了一个支持打印的页面。由于管理层的一些非常不寻常的要求，我需要能够捕获调用 window.print() 时出现的打印菜单的单击事件。具体来说，在 Chrome 中，我需要捕获“打印”（蓝色）和“取消”（灰色）按钮的点击事件。

我不得不承认我什至不知道从哪里开始。我检查了每个元素，可以看到这些是标准的 html 元素。这些按钮有类（print default 用于打印按钮，cancel 用于取消按钮）但没有 ID。

我还注意到在打印菜单之外没有可见的 DOM，并且打印菜单 html 标记的 ID 为“打印预览”。

如何捕获打印菜单按钮的点击事件（至少在 Chrome 中）？

【问题讨论】：

您需要实际的点击事件，还是只需要检测何时打印完成？
@approxiblue 我想您的意思是当打印窗口关闭并且您所在的实际网页再次填满屏幕时？如果这就是你的意思，这将是一个有用的答案，但我正在寻找这些按钮何时被实际点击（当这些按钮，尤其是“打印”按钮被点击时，我需要在幕后做一些事情）跨度>

标签： google-chrome javascript-events

【解决方案1】：

您是否尝试阻止网页中的打印，如果是，请点击以下链接。

http://webdesign.about.com/od/advancedcss/qt/block_print.htm

使用 CSS 来防止人们打印您的网页很容易。你只需要创建一个名为 print.css 的 1 行样式表，上面写着：

body { display: none; }

然后将该样式表加载为打印样式表：

&lt;link rel="stylesheet" type="text/css" href="print.css" <b>media="print"</b> /&gt;

重要的部分以粗体表示 - 这是一个打印样式表。它告诉浏览器，如果该网页设置为打印，则将正文切换为不显示任何内容。

然后，将打印的所有内容将是浏览器附加到打印页面的标准页眉和/或页脚。

一次阻止一页

如果您不需要阻止网站上的大量页面，您可以逐页阻止打印，并将以下样式粘贴到 HTML 的头部：

&lt;style type="text/css"&gt; @media print { body { display:none } } &lt;/style&gt;

让你的被屏蔽页面更有趣

但是，如果您想阻止打印，但又不想让您的客户太沮丧怎么办？您可以变得更花哨，并输入一条仅在您的读者打印页面时才会显示的消息 - 替换其他内容。为此，请构建您的标准网页，并在页面顶部的 body 标记之后放置：

&lt;div id="noprint"&gt;

在所有内容都写完后关闭该标签，在页面的最底部：

&lt;/div&gt;

然后，在您关闭“noprint” div 后，打开另一个 div，其中包含您希望在打印文档时显示的消息：

<div id="print"> <p>This page is intended to be viewed online and may not be printed. Please view this page at @987654322@; </div>

包含指向您的打印 CSS 文档的链接，名为 print.css：

&lt;link rel="stylesheet" type="text/css" href="print.css" media="print" /&gt;

并且在该文档中包含以下样式：

#noprint { display: none; }
 #print { display: block; }

最后，在您的标准样式表（或文档头部的内部样式）中，写下：

#print { display: none; }
 #noprint { display: block; }

这将确保打印消息只出现在打印页面上，而网页只出现在在线页面上。

【讨论】：

感谢您的回复，但这不是我想要做的

【解决方案2】：

您无法直接从常规网页访问 Chrome 的内部窗口（在这种情况下为打印对话框）。

要确定打印对话框是打开还是关闭，您可以捕获 matchMedia 事件（仅限 webkit）：

var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
    if (mql.matches) {
        console.log('before print dialog open');
    } else {
        console.log('after print dialog closed');
    }
});

但您无法检查是否单击了“打印”或“取消”按钮。无法从常规网页访问此信息。

要获取有关 Chrome 打印机作业的信息，您只能为 Chrome 创建扩展程序并在内容脚本中收听 onPrintRequested event。当然扩展必须安装到每个页面用户的浏览器中。

【讨论】：