execute javascript when printing page

Question

when printing a page, the javascript code seems to be executed.
how can I determine, if the page is currently being printed? I do some js-resizing, and have to handle printing a little bit different.

Solution 1

You can't, except for IE browsers. No other browser has a before print event. You can, however, target a specific stylesheet to only apply while printing:

<!-- In head -->
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

This stylesheet will be applied before printing. This allows you to perform some amazing changes, including hiding major sections, moving items around, and performing print-only styling, such as page breaks.

Another option is to provide the user with a "Print this Page" button. That button can handle your JavaScript, call window.print(), and revert the changes:

function printMe() {
    // perform changes
    window.print();
    // revert changes
}

The window.print() method always blocks (in every browser I've tested), so it's safe to immediately revert the changes afterward. However, if the user choose to print via the menu or toolbar, you are out of luck.

One way I handled that case in a complex web-app was to have a print stylesheet that hid everything but a special DIV. If the user clicked print, they would get a warning message. If they clicked the print button, then that div would be populated with the correct information. It's not great, but at least they didn't get several pages of garbage.

Solution 2

AFAIK there is no general possibility. IE has onbeforeprint and onafterprint which are now added also to Firefox 5/6+ (I dont know for sure). Consider using print specific stylesheets

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

Other relevant questions

• onbeforeprint() and onafterprint() equivalent for non IE browsers (PHP, MySQL, JavaScript, HTML)
• Trigger resize event on print
• What event is fired when window.print() is called?