Almost cross-browser beforeprint

For Internet Explorer, first implemented the events beforeprint and afterprint , and for a long time he was the only one who supported them. Then Mozilla pulled up, supporting these events from the 6th version of its browser . The webkit didn’t dare to implement for a very long time , and finally completely abandoned it, referring us to the matchMedia interface. Opera, as far as the author was able to figure it out, didn’t realize either the event or the matchMedia, although an inadequate googling of this issue is possible.

Based on the above, I want to share with readers a simple jQuery plugin, which adds support for the beforeprint and afterprint methods.


')

/ **
* @author Alexander Burtsev
* @description almost cross browser handling for afterprint and beforeprint
* @requires jQuery 1.7+
* /
$. fn . beforeprint = function ( callback ) {
return $ ( this ) . each ( function ( ) {
if ( ! jQuery. isWindow ( this ) )
return ;
if ( this . onbeforeprint ! == undefined )
$ ( this ) . on ( 'beforeprint' , callback ) ;
else if ( this . matchMedia )
this . matchMedia ( 'print' ) . addListener ( callback ) ;
} ) ;
} ;
$. fn . afterprint = function ( callback ) {
return $ ( this ) . each ( function ( ) {
if ( ! jQuery. isWindow ( this ) )
return ;
if ( this . onafterprint ! == undefined )
$ ( this ) . on ( 'afterprint' , callback ) ;
else if ( this . matchMedia )
this . matchMedia ( 'media' ) . addListener ( callback ) ;
} ) ;
} ;

About use

Suppose you have a page on your site that users will print. For example, consider Google maps (it would be patriotic to look at Yandex maps, but they implemented printing only on a separate page by clicking on the special button). If you decide to print it in Google Chrome, you will see the following result:



Google acted simply and beautifully. With the help of css media print removed all unnecessary elements, stylized print remaining, and honestly wrote at the top right: “this method can lead to incorrect results, so it’s better to use the print link”.

What did Google miss? He incorrectly centers the map on the print in chrome. In the original, she is centered around Moscow with the author, but is shifted here. And the greater the width of the screen, the greater the offset. This is due to the fact that Google Maps does not launch a simple javascript to update the map in print media.

Now we fix the bug with the above plugin:

// My use case
( function ( ) {
var _links = $ ( 'link [media = "print"]' ) ;

$ ( window )
. beforeprint ( function ( ) {
_links. attr ( 'media' , 'all' ) ;
map. updateAfterLayoutChange ( ) ;
} )
. afterprint ( function ( ) {
_links. attr ( 'media' , 'print' ) ;
map. updateAfterLayoutChange ( ) ;
} ) ;
// The updateAfterLayoutChange () method is fictional, and the map link is also
} ) ( ) ;

Profit!

Total

Now we can customize the appearance of the page for printing, not only using CSS, but also using JavaScript. Tested in IE8 +, Chrome and Mozille.

If your jQuery is older than 1.7, replace the on () method in the plugin code with bind (), now the plugin should be supported for versions 1.4.3+.