JS властивість Event.afterprint
Загальний опис
afterprint — це подія, яка виникає у веб-браузері після завершення операції друку або закриття вікна попереднього перегляду друку. Вона дозволяє виконувати певний JavaScript-код після того, як користувач роздрукував документ або вийшов із режиму попереднього перегляду друку. Це може бути корисно для відновлення змін на сторінці, які були зроблені спеціально для друку, або для виконання інших дій, що необхідні після завершення процесу друку.
Подія afterprint може використовуватися з методами addEventListener() або шляхом призначення функції обробника подій. Наприклад:
window.addEventListener('afterprint', function(event) {
console.log('Друк завершено або закрито попередній перегляд.');
});
У цьому прикладі, коли друк завершено або користувач закриває вікно попереднього перегляду друку, в консолі браузера з'явиться повідомлення.
Подія afterprint часто використовується разом із подією beforeprint, яка виникає перед початком друку або відкриттям попереднього перегляду друку. Це дозволяє веб-розробникам створювати динамічні інтерфейси, які можуть адаптуватися до процесу друку. Наприклад, перед друком можна приховати деякі елементи сторінки або змінити стиль, а після завершення друку — відновити початковий стан сторінки.
Важливо розуміти, що подія afterprint є подією високого рівня, що обробляється браузером, і вона не підтримується всіма браузерами. Наприклад, сучасні версії Chrome, Firefox, та Safari підтримують її, тоді як деякі старіші версії браузерів можуть не підтримувати. Тому перед використанням цієї події слід перевірити її підтримку у вашій цільовій аудиторії.
Приклад використання afterprint може включати в себе відновлення прихованих елементів сторінки, які були приховані під час друку, або записання у журнал інформації про те, що друк завершено.
| Порада: | Подія |
| Порада: | При використанні |
| Порада: | Переконайтеся, що обробники подій, пов'язані з |
| Порада: | Не забувайте про кросбраузерну підтримку: перевірте, чи підтримує браузер користувача подію |
Синтаксис
window.addEventListener('afterprint', function(event) {
// Ваш код тут
});
Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад дозволяє користувачу взаємодіяти зі сторінкою через текстове поле та перемикач. Перед друком елементи змінюють свій стиль, щоб вказати на активацію режиму друку. Після завершення друку або закриття вікна попереднього перегляду друку, стиль повертається до початкового стану, а користувач отримує відповідне повідомлення. Це допомагає користувачам бачити, як їхній контент буде виглядати під час друку, та забезпечує плавний перехід назад до стандартного вигляду сторінки.
У цьому прикладі деякі елементи з класом no-print приховуються перед друком і відновлюються після завершення друку. Це корисно для приховування елементів, які не повинні бути видимі на роздрукованій версії сторінки.
window.addEventListener('beforeprint', function(event) {
document.querySelectorAll('.no-print').forEach(function(element) {
element.style.display = 'none';
});
});
window.addEventListener('afterprint', function(event) {
document.querySelectorAll('.no-print').forEach(function(element) {
element.style.display = 'block';
});
});Цей приклад показує, як можна записати інформацію про завершення друку на сервер за допомогою запиту fetch. Це може бути корисно для аналітики або відстеження подій, пов'язаних з друком, у вашій системі.
window.addEventListener('afterprint', function(event) {
fetch('/log-print', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: 'Друк завершено' })
}).then(response => {
console.log('Логування завершено', response.status);
});
});