Onafterprint Attribute in HTML5
In this article I am going to describe about the implementation and use of Onafterprint Attribute in HTML5.
Onafterprint Event Attribute
The onafterprint attribute fires after the user has set the page to print, and the print dialogue box has appeared.. 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.
The onafterprint attribute is new in HTML5.
Browser Support
The onafterprint event attribute is only supported in Internet Explorer and Firefox. In IE, this attribute occurs before the print dialogue box, instead of after.
It is not supported by Google Chrome, Safari and Opera.
Syntax
<element onafterprint = "script" >
Attribute
| Attribute |
Value |
Description |
| onafterscript |
script |
triggers after the document is printed. |
| onbeforescript |
script |
triggers before the document is printed. |
Example of onafterprint attribute in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
window.onbeforeprint = BeforePrintEvent;
window.onafterprint = AfterPrintEvent;
function BeforePrintEvent() {
var div = document.getElementById("anyMessage");
div.className = "forPrint";
}
function AfterPrintEvent() {
var div = document.getElementById("anyMessage ");
div.className = "forScreen";
}
function Print() {
window.print();
}
</script>
</head>
<body>
<div id=" anyMessage ">Printing your document.</div>
<button onclick="Print ();">Print this page from Website.</button>
<p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
<p><b>Note:</b> The onafterprint attribute is only supported in Internet Explorer and Firefox.</p>
<p><b>Note:</b> In IE, the onafterprint attribute occurs before the print dialogue box, instead of after.</p>
</body>
</html>
Output
After Button is clicked we get
