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

Question

I have built a page that is print-enabled using window.print(). Because of some really unusual requirements from management, I need to be able to capture the click event for the print menu that appears when window.print() is called. Specifically, in Chrome, I need to capture the click event for the Print (blue) and Cancel (gray) buttons.

I have to admit I don't even know where to start here. I inspected each element and can see that these are standard html elements. These buttons have classes (print default for the print button and cancel for the cancel button) but no IDs.

I also noticed that no DOM is visible beyond the print menu, and the print menu html tag has an ID of 'print-preview'.

How do I capture click events for the print menu buttons (in Chrome at least)?

Answer 1

You can not access Chrome's internal windows (printing dialog in this case) directtly from a regular web page.

To determine that printing dialog was opened or closed you can catch matchMedia events (webkit only):

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

But you can not check if 'Print' or 'Cancel' button was clicked. This information is not accessible from regular web page.

To get information about Chrome's printer jobs you can only create extension for Chrome and listen onPrintRequested event in content script. Of course extension must be installed into browser of each page user.

Answer 2

Are you trying to block printing in a web page, if so please follow the below link.

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

It's easy to use CSS to prevent people from printing your Web pages. You simply need to create a 1 line stylesheet named print.css that says:

body { display: none; }

Then load that stylesheet as a print stylesheet:

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

The important part is indicated in bold - this is a print stylesheet. It tells the browser that if this Web page is set to print, switch the body to display nothing.

Then, all that will print will be the standard header and/or footer that the browser appends to printed pages.

Block One Page at a Time

If you don't need to block a lot of pages on your site, you can block printing on a page-by-page basis with the following styles pasted into the head of your HTML:

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

Get Fancier with Your Blocked Pages

But what if you want to block printing, but don't want your customers too frustrated? You can get a little fancier and put in a message that will only display when your readers print the page - replacing the other content. To do this, build your standard Web page, and at the top of the page, right after the body tag, put:

<div id="noprint">

And close that tag after all your content is written, at the very bottom of the page:

</div>

Then, after you've closed the "noprint" div, open another div with the message you want to display when the document is printed:

<div id="print">
 <p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p&gt;
 </div> 

Include a link to your print CSS document named print.css:

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

And in that document include the following styles:

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

Finally, in your standard stylesheet (or in an internal style in your document head), write:

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

This will insure that the print message only appears on the printed page, while the Web page only appears on the online page.