JS метод Object.close()

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

Метод close() є ключовим елементом для управління вікнами у веб-браузерах. Цей метод дозволяє розробникам закривати вікно браузера або вкладку, яке було відкрите за допомогою методу window.open(). Основне його призначення - надання можливості програмному закриттю вікон, створених через JavaScript, що може бути корисно для реалізації інтерактивних інтерфейсів, таких як поп-апи, модальні вікна та інші вікна з динамічним вмістом.

Метод close() найчастіше використовується у сценаріях, де потрібно закрити вікно, яке було відкрите за допомогою window.open(). Це може бути корисним для:

• Закриття вікон з додатковою інформацією або формами після виконання певних дій (наприклад, відправлення форми).
• Автоматизації тестування веб-додатків, де потрібно відкривати та закривати вікна.

Приклад коду:

let newWindow = window.open("", "_blank"); // Відкриває нове вікно
// ... виконання певних дій у новому вікні ...
newWindow.close(); // Закриває відкрите вікно

Важливо відзначити, що браузери обмежують використання методу close() для запобігання його зловживанню. Зазвичай, метод close() дозволений тільки для вікон, які були відкриті скриптом. Це означає, що спроби закрити вкладку або вікно, відкрите користувачем безпосередньо (не через скрипт), зазвичай, ігноруються браузером.

Метод close() в JavaScript є потужним інструментом для контролю над вікнами в браузері. Однак, його використання вимагає розуміння обмежень, накладених браузерами, і можливих сценаріїв його застосування. Програмісти повинні застосовувати цей метод у відповідальний та обдуманий спосіб, враховуючи досвід користувача та аспекти безпеки.

правити

Порада

Закриття вікон і вкладок може бути корисним, але варто використовувати цей метод обережно і відповідально, оскільки непередбачене закриття може призвести до втрати даних та незадоволення користувачів. Використовуйте його тільки тоді, коли ви впевнені, що це потрібно в вашому додатку і користувачі будуть це розуміти і згодні з цим.

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

Порада

Початківцям слід пам'ятати, що використання close() може призвести до незавершеного діалогу з користувачем, якщо у вас є відкриті вікна або вкладки з непідтвердженими діями. Завжди спершу запитуйте в користувача підтвердження закриття.

if (confirm("Ви впевнені, що хочете закрити це вікно?")) {
 window.close(); // Закрити вікно після підтвердження
}

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

Порада

Не всі браузери дозволяють програматично закривати вікна і вкладки за допомогою close(), і деякі можуть виводити попередження або блокувати цю дію. Пам'ятайте про це, і завжди тестуйте ваш код в різних браузерах, щоб бути впевненими в його сумісності.

Приклад перевірки на наявність методу close():

if (window.close) {
 window.close(); // Закрити вікно, якщо метод доступний
}

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

Порада

close() також може бути використаний для закриття поточного вікна або вкладки, на якій ви виконуєте JavaScript. Це може бути корисно, наприклад, для створення кнопки "Закрити" в вашому веб-додатку.

Приклад використання close() для закриття поточного вікна після події кліку на кнопку:

const closeButton = document.getElementById("close-button");
closeButton.addEventListener("click", () => {
 window.close(); // Закрити поточне вікно після кліку на кнопку
});

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

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

Синтаксис

close()

Переглядачі

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

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

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

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

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

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

Переглядач
	1.0*

Приклади

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

// У цьому прикладі ми закриваємо поточне вікно браузера через 3 секунди після завантаження сторінки.
setTimeout(() => {
  window.close();
}, 3000);

<button id="openButton">Відкрити вікно</button>
<button id="closeButton">Закрити вікно</button>

let childWindow = null;

document.getElementById('openButton').addEventListener('click', () => {
    childWindow = window.open('', '_blank', 'width=400,height=300');

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

    childWindow.document.write('<h1>Дочірнє вікно</h1>');
});

document.getElementById('closeButton').addEventListener('click', () => {
    if (childWindow && !childWindow.closed) {
        childWindow.close();
        console.log('Вікно закрито');
    } else {
        console.log('Вікно ще не відкрите');
    }
});