Закройте окно ребенка при обновлении.

Содержание

Вопрос или проблема
Ответ или решение
Как закрыть дочернее окно при обновлении
Шаг 1: Открытие дочернего окна
Шаг 2: Обработчик события beforeunload для дочернего окна
Шаг 3: Закрытие дочернего окна из родительского
Полный пример
Особенности и ограничения
Заключение

Вопрос или проблема

Как закрыть дочернее окно, открытое с помощью window.open, когда дочернее окно обновляется или переходит на другой ресурс?

Я пробовал следующий код, но он не работает:

const popout = window.open('', '', 'popout');
popout.onbeforeunload = () => {
    popout.close();
};

Похожий код работает для закрытия дочернего окна, когда родительское обновляется:

const popout = window.open('', '', 'popout');
window.onbeforeunload = () => {
    popout.close();
};

Я видел, как другие сайты это делают, но не могу понять, почему у меня остается пустое всплывающее окно, которое нужно закрывать вручную.

Думаю, ваше выражение window.open неправильное.

Видите ли, в первом параметре не указано URL, а третий параметр – это параметры нового окна… И 'popout' – это недопустимое значение для третьего параметра.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#windowfeatures

PS: Этот фрагмент кода никогда не сработает, потому что он блокирует всплывающие окна (новые окна)… Просто скопируйте код, откройте новую вкладку и введите about:blank, затем вставьте код в консоль. Это откроет всплывающее окно, затем вы можете вернуться на страницу about:blank (не закрывая всплывающее окно) и нажать на сгенерированную ссылку. Когда страница будет выгружена, всплывающее окно закроется.

let myPopupWindow;

window.addEventListener
(
  'beforeunload', unloadEvent =>
  {
    myPopupWindow && myPopupWindow.close();
  }
);

try
{
  myPopupWindow = window.open("https://stackoverflow.com/questions/79087996/about:blank", 'popup', 'popup; width=300; height=300;');
}
catch ( Issue )
{
  console.log('Ошибка при открытии нового окна:', Issue?.message ?? Issue);
}

const newAnchor = document.createElement('a');
{
  newAnchor.href="https://stackoverflow.com/questions/79087996/about:blank";
  newAnchor.textContent="Попробуйте нажать сюда.";
}

document.body.appendChild(newAnchor);

Ответ или решение

Чтобы закрыть дочернее окно, открытое с помощью window.open, при его обновлении или навигации, необходимо использовать события JavaScript. Приведенные ранее фрагменты кода не работают должным образом, так как не учитываются детали работы с событиями и открытием окон.

Как закрыть дочернее окно при обновлении

Вот пошаговое руководство, как это осуществить.

Шаг 1: Открытие дочернего окна

let myPopupWindow;

try {
    myPopupWindow = window.open("https://example.com", 'popup', 'width=300,height=300');
} catch (error) {
    console.log('Ошибка при открытии окна:', error.message);
}

В данном коде мы открываем новое окно с помощью window.open(), указывая URL и параметры окна (размеры, заголовок и т.д.). Важно убедиться, что URL является действительным, иначе окно не откроется.

Шаг 2: Обработчик события `beforeunload` для дочернего окна

Когда вы хотите закрыть дочернее окно при его обновлении или переходе на другую страницу, нужно назначить обработчик события. Однако, нужно реализовать проверку не на родительском окне, а на дочернем:

myPopupWindow.addEventListener('beforeunload', function() {
    window.close(); // Закрывает дочернее окно при его обновлении
});

Однако, имейте в виду, что такой подход может не работать во всех браузерах, так как некоторые из них ограничивают возможность скриптов закрывать окна, которые не были открыты непосредственно пользователем.

Шаг 3: Закрытие дочернего окна из родительского

Мы также можем обработать событие в родительском окне, чтобы оно закрывало дочернее окно при своем обновлении или закрытии:

window.addEventListener('beforeunload', function() {
    if (myPopupWindow) {
        myPopupWindow.close();
    }
});

Это событие будет срабатывать, когда родительское окно обновляется или закрывается, и соответственно закроет дочернее окно, если оно открыто.

Полный пример

let myPopupWindow;

// Открытие дочернего окна
try {
    myPopupWindow = window.open("https://example.com", 'popup', 'width=300,height=300');
} catch (error) {
    console.log('Ошибка при открытии окна:', error.message);
}

// Обработчик события для закрытия дочернего окна
window.addEventListener('beforeunload', function() {
    if (myPopupWindow) {
        myPopupWindow.close();
    }
});

Особенности и ограничения

Проблемы с блокировщиками всплывающих окон: современные браузеры могут блокировать открытие окон, если они не инициированы прямым действием пользователя (например, нажатием кнопки).
Различия в браузерах: поведение кода может отличаться на разных браузерах и устройствах, поэтому тестируйте его в тех условиях, где он будет использован.
Пользовательские настройки: некоторые пользователи могут иметь настройки, которые блокируют выполнение JavaScript, особенно при закрытии окон.

Заключение

Согласно приведенному примеру, возможно закрыть дочернее окно при обновлении как из родительского, так и из дочернего окна. Однако стоит учитывать ограничения, которые накладываются современными браузерами по секьюрити. Поэтому перед реализацией таких функций рекомендуется провести тестирование на целевых платформах и браузерах.