-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
643 lines (468 loc) · 40.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Detecting Print Requests with JavaScript - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development</title>
<meta name="author" content="TJ VanToll">
<meta name="description" content="CSS has a well supported mechanism for applying changes only when the user is printing a document, print stylesheets. They allow you to alter the …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript">
<!-- Use custom favicon -->
<!--<link href="/favicon.png" rel="icon">-->
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--Custom script concatenation
<script src="/javascripts/modernizr-2.5.3.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js"></script>
<script src="/javascripts/PictureCube.js"></script>
<script src="/javascripts/ender.tipsy.js"></script>
<script src="/javascripts/blog.js"></script>
-->
<script src="/javascripts/build/scripts.js"></script>
<link href="/atom.xml" rel="alternate" title="TJ VanToll" type="application/atom+xml">
<style>
/* Fonts from Google"s Web font directory at http://google.com/webfonts */
@import url(http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic);
</style>
<script type="text/javascript">
if (window.location.host.indexOf('local') == -1) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29179796-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
}
</script>
</head>
<body >
<header role="banner"><hgroup>
<div id="picture-cube"></div>
<h1><a href="/">TJ VanToll</a></h1>
<h2>Tutorials, Thoughts, and Ramblings on Front End Development</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:tjvantoll.com" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/blog">Blog</a></li>
<li><a href="/">About</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/speaking">Speaking</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div>
<article class="hentry" role="article">
<header>
<h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<p class="meta">
<time datetime="2012-06-15T00:00:00-04:00" pubdate data-updated="true">Jun 15<span>th</span>, 2012</time>
| <a href="#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>CSS has a well supported mechanism for applying changes only when the user is printing a document, <a href="http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/">print stylesheets</a>. They allow you to alter the presentation of a web page for the printer by applying rules that will only be interpreted for printing. This is great for common tasks like hiding non-essential content, using more print friendly typography, and adjusting the layout to better suit the size and shape of paper.</p>
<p>Print stylesheets are great for making presentational changes for printing, but sometimes you need the full power of JavaScript. And in order to do respond to print requests in JavaScript you need the browser to notify you that a print request occurred.</p>
<!--more-->
<h3>onbeforeprint and onafterprint</h3>
<p>IE5+ fires <code>onbeforeprint</code> and <code>onafterprint</code> events before and after the user requests the page to be printed.</p>
<figure class='code'><figcaption class='not_empty'><span>onbeforeprint and onaferprint</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'This will be called before the user prints.'</span><span class="p">);</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'><span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'This will be called after the user prints'</span><span class="p">);</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>
<p>These events are not part of any specification but they are very convenient. Because of this <a href="https://developer.mozilla.org/en/DOM/window.onbeforeprint#Browser_compatibility">Firefox added support for both events in version 6</a>. However, WebKit and Opera do not support the events. Therefore, for cross browser compatibility these events aren’t going to cut it.</p>
<h3>WebKit’s Solution</h3>
<p>WebKit has a bug (#<a href="https://bugs.webkit.org/show_bug.cgi?id=19937">19937</a>) out there to implement these events, but progress has stopped because the implementation of another API made this functionality possible already - <code>window.matchMedia</code>.</p>
<h3>window.matchMedia</h3>
<p>The <code>window.matchMedia</code> <a href="https://developer.mozilla.org/en/DOM/window.matchMedia">API</a> provides a means of determining whether the current <code>document</code> matches a given <a href="https://developer.mozilla.org/En/CSS/Media_queries">media query</a>. For example:</p>
<figure class='code'><figcaption class='not_empty'><span>window.matchMedia</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">' (min-width: 600px) '</span><span class="p">).</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'The viewport is at least 600 pixels wide'</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'The viewport is less than 600 pixels wide'</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>You can also use this API to add listeners that will be fired whenever the result of the media query changes. In the above example the <code>matches</code> criteria will be met whenever the viewport is at least 600px wide. If you wanted to receive notifications whenever the viewport crossed the 600px threshold you could use the following.</p>
<figure class='code'><figcaption class='not_empty'><span>window.matchMedia with notifications</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">' (min-width: 600px) '</span><span class="p">);</span>
</span><span class='line'><span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'The viewport is at least 600 pixels wide'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'The viewport is less than 600 pixels wide'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p><a href="http://caniuse.com/#feat=matchmedia">If your browser supports window.matchMedia</a> you can see this behavior live below by resizing your browser window under 600px and checking your browser’s JavaScript console.</p>
<iframe style="width: 100%; height: 200px;" src="http://jsfiddle.net/tj_vantoll/uYJxy/2/embedded/result,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>Interestingly, it turns out you can also use this same technique to listen for the <code>print</code> media being applied when the user requests the document to be printed (<a href="http://code.google.com/p/chromium/issues/detail?id=105743">hat tip to Ben Wells</a>):</p>
<figure class='code'><figcaption class='not_empty'><span>Using window.matchMedia to detecting print requests</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'print'</span><span class="p">);</span>
</span><span class='line'><span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'onbeforeprint equivalent'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'onafterprint equivalent'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>This works great in Chrome 9+ and Safari 5.1 (with the exception of the fact that the <a href="http://code.google.com/p/chromium/issues/detail?id=105743">listeners fire twice in Chrome</a>). However, it doesn’t work in Firefox or IE10, even though they both support <code>window.matchMedia</code>.</p>
<h4>Update (July 16th, 2012)</h4>
<p>I created a bug on Firefox’s issue tracker for this defect - <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=774398">https://bugzilla.mozilla.org/show_bug.cgi?id=774398</a>. I’ll update this post when I hear back.</p>
<h3>Combining the Approaches</h3>
<p>If you combine the two approaches you can detect print requests in IE 5+, Firefox 6+, Chrome 9+, and Safari 5.1+ (unfortunately Opera doesn’t support either approach).</p>
<figure class='code'><figcaption class='not_empty'><span>Cross browser print request detection</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">beforePrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Functionality to run before printing.'</span><span class="p">);</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">afterPrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Functionality to run after printing'</span><span class="p">);</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'print'</span><span class="p">);</span>
</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">beforePrint</span><span class="p">();</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">afterPrint</span><span class="p">();</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="nx">beforePrint</span><span class="p">;</span>
</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="nx">afterPrint</span><span class="p">;</span>
</span><span class='line'><span class="p">}());</span>
</span></code></pre></td></tr></table></div></figure>
<p>Note that your event handlers might potentially have to deal with the fact that they’re going to be called twice per print request in Chrome.</p>
<h3>Why Would I Use This?</h3>
<p>For most situations print stylesheets are all you need to prepare the document for printing. But I can think of a couple practical uses of the JavaScript event.</p>
<h3>Responsive Print Images</h3>
<p>One use is substituting a higher quality image for the purposes of printing. Traditionally <a href="http://www.cssnewbie.com/print-friendly-images/">web browsers have displayed images at 72dpi and most printers can handle 300dpi+</a>. While some newer devices are able to display images at much higher resolutions, most users are still using a screen that will show web images at much lower resolutions than their printer can handle.</p>
<p>Therefore an image that might look just fine on the user’s screen might look fuzzy and grainy when printed out. For most images this is acceptable, but it might be an issue for prominent images on regularly printed documents, like a company logo. You probably want that to look crisp when printed out.</p>
<p>The <a href="http://www.alistapart.com/articles/hiresprinting">technique to work around this</a> involves loading both images, showing only the lower quality one by default, then hiding the low quality image and showing the high quality one in the print stylesheet. The main downfall of this approach is that the end user has to download both images regardless of whether they’re going to print the page. Users on 3G devices that have no intention or capability of printing the document will still have to download your high resolution logo.</p>
<p>With the ability to detect print requests in JavaScript you can substitute the higher quality image on the fly when the user requests the page to be printed.</p>
<figure class='code'><figcaption class='not_empty'><span>Substituting higher quality images when printing</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><img</span> <span class="na">src=</span><span class="s">"low-quality.jpg"</span> <span class="na">id=</span><span class="s">"company_logo"</span> <span class="na">alt=</span><span class="s">"My Company"</span> <span class="nt">/></span>
</span><span class='line'>
</span><span class='line'><span class="nt"><script></span>
</span><span class='line'> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">upgradeImage</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'company_logo'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'src'</span><span class="p">,</span> <span class="s1">'high-quality.png'</span><span class="p">);</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'print'</span><span class="p">);</span>
</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="nx">upgradeImage</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="nx">upgradeImage</span><span class="p">;</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="nt"></script></span>
</span></code></pre></td></tr></table></div></figure>
<p>The nice thing about this approach is that users that never print will not have to download the high quality image. This technique also degrades nicely; users with browsers that don’t support the print events will simply print the lower quality image.</p>
<h3>Tracking Print Requests</h3>
<p>Print events can also be used to track the number of times users print pages within a site or application. Because of the lack of total browser support you wouldn’t capture every print request, but this would be sufficient for getting a rough idea of how often people are printing.</p>
<figure class='code'><figcaption class='not_empty'><span>Tracking Print Requests</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">afterPrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">// Here you would send an AJAX request to the server to track that a page</span>
</span><span class='line'> <span class="c1">// has been printed. You could additionally pass the URL if you wanted to</span>
</span><span class='line'> <span class="c1">// track printing across an entire site or application.</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'print'</span><span class="p">);</span>
</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">afterPrint</span><span class="p">();</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="nx">afterPrint</span><span class="p">;</span>
</span><span class='line'><span class="p">}());</span>
</span></code></pre></td></tr></table></div></figure>
<h3>So can I use this in a “real” application?</h3>
<p>Sure, just make sure what you’re doing degrades nicely for users using a browser in which the event will not be fired.</p>
<p>Can you think of any other practical uses of detecting print requests in JavaScript? If so let me know in the comments.</p>
<h4>Update (July 16th, 2012)</h4>
<p>Per the comments I’ve found that in addition to all the bugs mentioned above, certain browsers trigger the after print event early (with either <code>onafterprint</code> or the <code>window.matchMedia</code> handler implementation).</p>
<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp"><!DOCTYPE html></span>
</span><span class='line'><span class="nt"><html></span>
</span><span class='line'> <span class="nt"><head></span>
</span><span class='line'> <span class="nt"><script></span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">beforePrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'printImage'</span><span class="p">).</span><span class="nx">src</span> <span class="o">=</span>
</span><span class='line'> <span class="s1">'http://stackoverflow.com/favicon.ico'</span><span class="p">;</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">afterPrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'printImage'</span><span class="p">).</span><span class="nx">src</span> <span class="o">=</span>
</span><span class='line'> <span class="s1">'http://google.com/favicon.ico'</span><span class="p">;</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'print'</span><span class="p">);</span>
</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">beforePrint</span><span class="p">();</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">afterPrint</span><span class="p">();</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="nx">beforePrint</span><span class="p">;</span>
</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="nx">afterPrint</span><span class="p">;</span>
</span><span class='line'> <span class="nt"></script></span>
</span><span class='line'> <span class="nt"></head></span>
</span><span class='line'> <span class="nt"><body></span>
</span><span class='line'> <span class="nt"><img</span> <span class="na">id=</span><span class="s">"printImage"</span> <span class="na">src=</span><span class="s">"http://google.com/favicon.ico"</span> <span class="nt">/></span>
</span><span class='line'> <span class="nt"></body></span>
</span><span class='line'><span class="nt"></html></span>
</span></code></pre></td></tr></table></div></figure>
<p>When printing the above document you would expect Stack Overflow’s favicon to print, when in actuality Google’s favicon prints. Both events fire, but the after print event fires before the printing actually occurs, which in this case reverts the changes made in the before print event.</p>
<p>I was able to recreate this problem in Chrome and Firefox.</p>
<p>Therefore do not do anything that relies on the after print event to fix what the before print event did. For responsive print images this shouldn’t be an issue because there should be no harm leaving the higher quality image in place; the user has already downloaded it.</p>
</div>
<footer>
<p class="meta">
<span class="byline author vcard">Posted by <span class="fn">TJ VanToll</span></span>
<time datetime="2012-06-15T00:00:00-04:00" pubdate data-updated="true">Jun 15<span>th</span>, 2012</time>
<span class="categories">
<a class='category' href='/blog/categories/browsers/'>Browsers</a>, <a class='category' href='/blog/categories/javascript/'>JavaScript</a>
</span>
</p>
<p class="author_card meta">
<img src="/images/me/1.jpg" alt="Me!" id="post_me" />
TJ VanToll is an avid web developer working for <a href="http://liquidweb.com">Liquid Web</a> and living in Lansing, MI. He is an open source advocate who publishes this blog <a href="https://github.com/tjvantoll/tjvantoll.github.com/tree/source">open source</a> and contributes to <a href="http://jqueryui.com">jQuery UI</a>. When not on the internet he is generally found <a href="/images/kids/2.jpg">brainwashing his children</a>, debating CSS with his girlfriend, or talking about himself in the third person. If you like hearing TJ talk about himself you should consider <a href="http://twitter.com/tjvantoll">following him on Twitter</a>.
</p>
<div class="sharing">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/" data-via="tjvantoll" data-counturl="http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/" >Tweet</a>
</div>
<p class="meta">
<a class="basic-alignment left" href="/2012/06/10/browser-css-parsing-discrepancies/" title="Previous Post: Browser CSS Parsing Discrepancies">« Browser CSS Parsing Discrepancies</a>
<a class="basic-alignment right" href="/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/" title="Next Post: Creating a Native HTML 5 Datepicker with a Fallback to jQuery UI">Creating a Native HTML 5 Datepicker with a Fallback to jQuery UI »</a>
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
<aside class="sidebar">
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
<li class="post">
<a href="/2012/10/24/adding-pointers-to-jquery-ui-tooltips/">Adding Pointers to jQuery UI Tooltips</a>
</li>
<li class="post">
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
<li class="post">
<a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
</li>
<li class="post">
<a href="/2012/09/19/using-the-attribute-selector-with-numeric-values/">Using the Attribute Selector with Numeric Values</a>
</li>
<li class="post">
<a href="/2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/">Using jQuery UI's Slider to Polyfill HTML5's input[type=range]</a>
</li>
<li class="post">
<a href="/2012/08/30/html5-form-validation-start-using-it-in-production-applications/">HTML5 Form Validation - Start Using it in Production Applications</a>
</li>
<li class="post">
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
<li class="post">
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
<li class="post">
<a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
</li>
</ul>
</section>
<section>
<h1>Latest Tweets</h1>
<ul id="tweets">
<li class="loading">Status updating...</li>
</ul>
<script type="text/javascript">
$.domReady(function(){
getTwitterFeed("tjvantoll", 4, false);
});
</script>
<script src="/javascripts/twitter.js" type="text/javascript"> </script>
<a href="http://twitter.com/tjvantoll" class="twitter-follow-button" data-show-count="false">Follow @tjvantoll</a>
</section>
<section class="jsdocs">
<h1><a href="http://promotejs.com">Promote JS!</a></h1>
<a href="https://developer.mozilla.org/en/JavaScript/Guide" title="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript"><img src="http://static.jsconf.us/promotejshs.png" height="150" alt="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript" width="180"></a></section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2012 - <a href="/">TJ VanToll</a> -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'tjvantoll';
// var disqus_developer = 1;
var disqus_identifier = 'http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/';
var disqus_url = 'http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>