JS властивість Object.closed

Загальний опис

Властивість closed об'єкта Window у JavaScript надає можливість перевірити, чи було закрите вікно браузера або вкладка. Ця властивість повертає булеве значення: true, якщо вікно закрите, і false – якщо воно відкрите. Властивість closed є часто використовуваною для управління взаємодією між батьківськими та дочірніми вікнами, дозволяючи розробникам відстежувати стан цих вікон та відповідно реагувати на їх зміну.

Основна корисність властивості closed полягає у можливості перевірки статусу вікна без необхідності виклику виняткових методів або ведення додаткового статусу вікна. Це особливо важливо у сценаріях, де потрібно забезпечити взаємодію між вікнами, наприклад, при роботі з вікнами-спливаючими діалогами (pop-ups) або при створенні складних користувацьких інтерфейсів, що використовують кілька вікон.

Використання властивості closed

1. Базове використання: Найпростіший спосіб використати властивість closed - перевірити статус вікна після його відкриття за допомогою window.open(). Припустимо, ви відкрили нове вікно і хочете перевірити, чи користувач його закрив.

let newWindow = window.open("https://example.com", "_blank");
if (newWindow.closed) {
		console.log("Вікно було закрите.");
} else {
		console.log("Вікно ще відкрите.");
}

У цьому прикладі, після спроби відкриття вікна, виконується перевірка його статусу.

1. Перевірка стану вікна у реальному часі: Можна використовувати setInterval для періодичної перевірки статусу вікна. Це може бути корисно, коли потрібно виконати деякі дії в батьківському вікні, як тільки дочірнє вікно буде закрите.

let newWindow = window.open("https://example.com", "_blank");
let checkInterval = setInterval(() => {
		if (newWindow.closed) {
				console.log("Вікно було закрите.");
				clearInterval(checkInterval);
		}
}, 1000);

У цьому прикладі код регулярно (кожну секунду) перевіряє статус вікна та виводить повідомлення, коли вікно закрите.

1. Комбінування з іншими подіями та методами: Властивість closed може використовуватися разом з іншими подіями та методами для створення складніших інтерактивних сценаріїв. Наприклад, вона може бути комбінована з подією beforeunload для запиту підтвердження від користувача перед закриттям вікна.

let newWindow = window.open("https://example.com", "_blank");
newWindow.onbeforeunload = function() {
		return "Ви впевнені, що хочете закрити це вікно?";
};

// Перевірка статусу вікна
if (newWindow.closed) {
		console.log("Вікно було закрите.");
}

У цілому, властивість closed відіграє ключову роль у визначенні статусу вікон у браузері, даючи можливість розробникам керувати взаємодією між вікнами на веб-сторінках. Використовуючи цю властивість, розробники можуть підвищити інтерактивність та користувацький досвід, а також запобігти можливим проблемам у взаємодії з вікнами.

правити

Порада

Під час роботи з window.closed, уникайте безкінечного опитування стану вікна, оскільки це може привести до зайвого споживання ресурсів. Використовуйте setInterval або setTimeout для контрольованої перевірки стану.

автор: Bond правити

Порада

Переконайтесь, що ваш код обробляє сценарії, коли вікно може бути вже закритим. Доступ до властивостей або методів закритого вікна може призвести до помилок. Використовуйте умовну перевірку з window.closed, перш ніж здійснювати подальші дії з вікном.

автор: Bond правити

Порада

У розробці багатовіконних застосунків, де взаємодія між вікнами є ключовою, window.closed може слугувати сигналом для зміни поведінки або збереження даних. Це особливо корисно у сценаріях, де одне вікно залежить від інформації з іншого вікна, яке може бути закрите користувачем.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

closed

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<button id="open">Відкрити вікно</button>

let newWindow = null;

document.getElementById('open').addEventListener('click', () => {
    newWindow = window.open('https://css.in.ua');

    if (!newWindow) {
        console.log('Спливне вікно заблоковано браузером');
        return;
    }

    setTimeout(() => {
        console.log(newWindow.closed ? 'Вікно закрите.' : 'Вікно ще відкрите.');
    }, 1000);
});

// Відкриття нового вікна
let childWindow = window.open("https://example.com");

// Функція для перевірки стану вікна
function checkWindowStatus() {
    if (childWindow.closed) {
        console.log("Дочірнє вікно закрите.");
        clearInterval(intervalId); // Зупинка таймера
    } else {
        console.log("Дочірнє вікно все ще відкрите.");
    }
}

// Періодична перевірка кожні 5 секунд
let intervalId = setInterval(checkWindowStatus, 5000);