You are here: Reference > JavaScript > client-side > event handling > events > onbeforeprint

onbeforeprint event | beforeprint event

Browser support:
Occurs when the browser starts to build the contents of the current document for printing or for the print preview.
This event is commonly used together with the onafterprint event. With these two events, you can manipulate the contents and appearance of the current document for printing.
The onbeforeprint and onafterprint events are only supported by Internet Explorer. For a cross-browser solution, use the media style rule with the 'print' media type. See the examples for details.

How to register:

In HTML:
<ELEMENT onbeforeprint="handler">

In JavaScript:
object.onbeforeprint = handler;
object.addEventListener ("beforeprint", handler, useCapture);
9
object.attachEvent ("onbeforeprint", handler);
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles No
Cancelable No
Event object Event

Actions that invoke the onbeforeprint event:

  • Opening the print or print preview dialog (from a menu, contextmenu or with CTRL + P).
  • Invoking the window.print method.

The order of events related to the onbeforeprint event:

Action Event order
Any action that invokes the onbeforeprint event.
  1. onbeforeprint
  2. onafterprint

Example HTML code 1:

This example illustrates the use of the onbeforeprint event:
<head>
    <style>
        .forPrint {
            visibility: visible;
            color: red;
        }

        .forScreen {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        window.onbeforeprint = BeforePrint;
        window.onafterprint = AfterPrint;
        
        function BeforePrint () {
            var div = document.getElementById ("myDiv");
            div.className = "forPrint";
        }

        function AfterPrint () {
            var div = document.getElementById ("myDiv");
            div.className = "forScreen";
        }

        function Print () {
            window.print ();
        }
    </script>
</head>
<body>
    <div id="myDiv" class="forScreen">This text is only visible for printing.</div>
    <button onclick="Print ();">Print this page.</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

A cross-browser solution for the previous example:
<head>
    <style>
        @media print {
            #myDiv {
                visibility: visible;
                color: red;
            }
        }

        @media screen {
            #myDiv {
                visibility: hidden;
            }
        }
    </style>
    <script type="text/javascript">
        function Print () {
            window.print ();
        }
    </script>
</head>
<body>
    <div id="myDiv" class="forScreen">This text is only visible for printing.</div>
    <button onclick="Print ();">Print this page.</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content