The HTML5 Onafterprint Event
The HTML5 onafterprint event is called after print event fires. It is commonly found on the HTML5 body tag. Browser performs content building for printing or print preview and this event will fire after this content building is finished.
HTML5 onafterprint event can be envoked in several ways.
- from menu or context menu or by pressing Crtl+P
- by invoking window.print() method
Typically you would use the following HTML5 tag with onafterprint:
<body onafterprint="handler">
Example below present a complete code sample for HTML5 onafterprint event.
<head>
<style>
.printView {
visibility: visible;
}
.screenView {
visibility: hidden;
}
</style>
<script type="text/javascript">
window.onbeforeprint = BeforePrintEvent;
window.onafterprint = AfterPrintEvent;
function BeforePrintEvent() {
var div = document.getElementById("myMessage");
div.className = "forPrint";
}
function AfterPrintEvent() {
var div = document.getElementById("myMessage ");
div.className = "forScreen";
}
function Print() {
window.print();
}
</script>
</head>
<body>
<div id=" myMessage " >Printing your document.</div>
<button onclick="Print ();">Print this page from Website.</button>
</body>