👀 Live Preview
Use Print on this page — when the dialog closes, the status updates:
Open print dialog, then close it to trigger afterprint.
HTML onafterprint Attribute
Overview
Introduction
The onafterprint attribute is an inline event handler that runs JavaScript when the afterprint event fires. That event occurs on the window when the browser’s print dialog closes or after printing has started. Use it to restore screen UI that you changed for printing—for example removing a temporary class added in onbeforeprint. It does not guarantee the user actually printed; canceling the dialog still triggers afterprint in modern browsers.
What You’ll Learn
Event handler
Inline JS.
afterprint
Window event.
Dialog closes
Not print proof.
+ beforeprint
Prepare / restore.
addEventListener
Preferred way.
.onafterprint
Property API.
Fundamentals
Purpose of onafterprint Attribute
The primary purpose of onafterprint is to run cleanup logic after the user finishes interacting with the print UI. A common pattern hides navigation during print preview in beforeprint and shows it again in afterprint. You might refresh analytics, revert DOM changes, or re-enable buttons that were disabled for the print flow.
The old reference said the document was “successfully printed.” That is inaccurate—afterprint means the print dialog closed, not that output reached a printer. Treat it as “print flow ended” rather than “print succeeded.”
Prefer addEventListener on window
Production code should use window.addEventListener("afterprint", handler). Inline onafterprint on <body> works for learning but separates concerns less cleanly.
Foundation
📝 Syntax
Set onafterprint on body or assign window.onafterprint:
onafterprint.html
<script>
function handleAfterPrint() {
document.body.classList.remove("printing");
console.log("Print dialog closed.");
}
</script>
<body onafterprint="handleAfterPrint()">
<button type="button" onclick="window.print()">Print</button>
</body>Syntax Rules
- Value is JavaScript code executed when the
afterprintevent fires. - Event target is
window;body.onafterprintmaps to the same event. - Pair with
onbeforeprint/beforeprintfor prepare-and-restore flows. - JavaScript:
window.onafterprint = function() { … }. - Modern alternative:
window.addEventListener("afterprint", handler). - Triggered by
window.print()or the user choosing Print from the browser menu.
Reference
💎 Values
The onafterprint attribute accepts a string of JavaScript code:
onafterprint="handleAfterPrint()"— Call a named function.onafterprint="console.log('done')"— Inline statement.- JavaScript:
window.onafterprint = () => { … }assigns the handler.
onafterprint-js.html
window.addEventListener("afterprint", () => {
document.body.classList.remove("print-mode");
});
window.addEventListener("beforeprint", () => {
document.body.classList.add("print-mode");
});Cheat Sheet
⚡ Quick Reference
| Event | When it fires | Handler |
|---|---|---|
beforeprint | Print dialog opens | onbeforeprint |
afterprint | Print dialog closes | onafterprint |
| Open print UI | window.print() | User or script |
| Restore UI | In afterprint handler | Remove print-only classes |
| Print CSS | @media print { … } | Often enough alone |
Scope
Applicable Elements
| Target | Supported? | Notes |
|---|---|---|
window | Yes | Primary event target |
<body> | Yes | Inline onafterprint attribute |
<img>, <form> | No | Not print events |
Compare
onbeforeprint vs onafterprint
| Handler | Timing | Typical use |
|---|---|---|
onbeforeprint | Before / when dialog opens | Add print styles, hide chrome |
onafterprint | When dialog closes | Restore screen layout |
Hands-On
Examples Gallery
Inline onafterprint, addEventListener on window, and pairing with beforeprint.
Example — Inline onafterprint on body
Call a function when the print dialog closes:
inline-onafterprint.html
<body onafterprint="handleAfterPrint()">
<button onclick="window.print()">Print</button>
</body>
<script>
function handleAfterPrint() {
console.log("Print dialog closed.");
}
</script>How It Works
The browser fires afterprint on window when the print UI closes. The inline attribute on body wires up the same handler.
Dynamic Values with JavaScript
Attach the handler with addEventListener:
dynamic-onafterprint.html
<script>
window.addEventListener("afterprint", () => {
console.log("Dynamic logic after print dialog.");
});
// Or property form:
window.onafterprint = function () { /* … */ };
</script>How It Works
Register the listener once at page load. Every time the user opens and closes the print dialog, afterprint runs your cleanup code.
Example — Pair with beforeprint
Restore screen styles after printing:
before-after-print.html
window.addEventListener("beforeprint", () => {
document.body.classList.add("print-mode");
});
window.addEventListener("afterprint", () => {
document.body.classList.remove("print-mode");
});How It Works
beforeprint prepares the page; afterprint undoes temporary changes so the screen view returns to normal.
A11y
♿ Accessibility
- Do not hide essential content for screen — Changes in afterprint should restore what sighted keyboard users need on screen.
- Print styles in CSS — Use
@media printso content remains readable on paper without relying only on JS. - Avoid alert() — Replace demo alerts with status text; alerts trap focus and annoy users.
- Focus management — If beforeprint moved focus, consider restoring it in afterprint when appropriate.
- Test cancel path — Users who cancel printing still get afterprint; ensure restore logic runs correctly.
🧠 How onafterprint Works
1
User opens print
window.print() or browser menu.
beforeprint
2
Print dialog shown
User prints or cancels.
Dialog
3
Dialog closes
afterprint event fires.
onafterprint
=
Restore screen UI
Cleanup handler runs.
Compatibility
Browser Support
The afterprint event and onafterprint handler are supported in Chrome 63+, Firefox 6+, Safari 13+, and Edge 79+. Older browsers may not fire these events; rely on @media print CSS as a baseline.
DOM Events · Fully supported
Universal onafterprint support
All major browsers fire the underlying event and honor the onafterprint handler attribute.
98% Browser support
Google Chrome 63+
Full supportMozilla Firefox 6+
Full supportApple Safari 13+
Full supportMicrosoft Edge 79+
Full supportInternet Explorer IE 9+ supported
Full supportOpera Fully supported
Full supportonafterprint attribute 98% supported
Bottom line: Widely supported in modern browsers. Test print and cancel flows in your target browsers.
Pro Tips
💡 Best Practices
✅ Do
- Use addEventListener on window — Clearer than inline
onafterprint. - Pair with beforeprint — Every prepare step should have a matching restore step.
- Prefer @media print CSS — Use JS events only when CSS alone is insufficient.
- Handle cancel — afterprint runs even when the user does not print.
- Keep handlers fast — Avoid heavy work blocking the UI after the dialog closes.
❌ Don’t
- Do not assume print success — No built-in event confirms paper output.
Wrap Up
Conclusion
The onafterprint attribute runs JavaScript when the print dialog closes and the afterprint event fires on window. Use it to restore UI changes made for printing.
Pair it with onbeforeprint, prefer addEventListener("afterprint", …), and remember the event means “print flow ended,” not “print succeeded.”
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about onafterprint
Bookmark these before wiring your next event handler.
5
Core concepts 01
Dialog closes
afterprint fires.
Event 02
window target
Not img/form.
Scope 03
Restore UI
After beforeprint.
Pattern 04
addEventListener
Preferred.
Modern 05
Not success proof
Cancel too.
Note❓ Frequently Asked Questions
It runs JavaScript when the
afterprint event fires — when the print dialog closes or printing starts.No. It fires when the print dialog closes, including when the user cancels. There is no standard event that confirms paper output.
On
window via addEventListener("afterprint", …). Inline onafterprint on body also works.onbeforeprint runs when the dialog opens (prepare). onafterprint runs when it closes (restore).Yes.
@media print { … } handles most print styling without JavaScript. Use afterprint when you need script-driven cleanup.Call
window.print() or use the browser Print command, then close the dialog to fire afterprint.Restore UI after printing
Practice inline onafterprint, addEventListener, and beforeprint pairing in the Try It editor.
About the author
5 people found this page helpful