In order to access this site you need to enable JavaScript!

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

onafterprint event | afterprint event

Browser support:

Occurs when the browser has built the contents of the current document for printing or for the print preview.

This event is commonly used together with the onbeforeprint 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:

In JavaScript:

object.onafterprint = handler;

object.addEventListener ("afterprint", handler, useCapture);

9

object.attachEvent ("onafterprint", 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 onafterprint 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 onafterprint event:

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

Example HTML code 1:

This example illustrates the use of the onafterprint 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>

Copy Code

Preview

Syntax Highlighter

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>