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

Question

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

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

我还注意到在打印菜单之外看不到 DOM，并且打印菜单 html 标签的 ID 为 'print-preview'。

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

Answer 1

您是否试图在网页中阻止打印，如果是，请按照以下 link。

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

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

body { display: none; }

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

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

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

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

一次阻止一页

如果您不需要在您的网站上屏蔽很多页面，您可以逐页屏蔽打印，将以下样式粘贴到您的 HTML:

<style type="text/css"> @media print { body { display:none } } </style>

让您的阻止页面变得更有趣

但是如果您想要阻止打印，又不想让您的客户太沮丧怎么办？您可以稍微花点心思，加入一条仅在您的读者打印页面时才会显示的消息 - 替换其他内容。为此，构建您的标准网页，并在页面顶部，紧跟在 body 标签之后，输入：

<div id="noprint">

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

</div>

然后，在关闭 "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 <a href="http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p&gt" rel="nofollow">http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p&gt</a>;
 </div>

将 link 添加到名为 print.css 的打印 CSS 文档中：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

并在该文档中包含以下内容styles:

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

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

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

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

Answer 2

您无法直接从常规网页访问 Chrome 的内部 windows（在本例中为打印对话框）。

要确定打印对话框是打开还是关闭，您可以捕获 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');
    }
});

但是您无法检查是否单击了 'Print' 或 'Cancel' 按钮。无法从常规网页访问此信息。

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

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

How to capture the click event on the default print menu called by Javascript window.print()?

google-chrome

dom-events

一次阻止一页

让您的阻止页面变得更有趣