Как отследить закрытие дочерней веб-страницы в родительской с помощью JavaScript?

Оффтоп javascript
1

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

Есть ли какое-нибудь событие в родительском окне, которое можно использовать для определения момента закрытия дочернего окна? Может быть, есть способ отследить это без внесения изменений в код дочерней страницы?

Буду благодарен за любые идеи или примеры кода, как это можно реализовать. Спасибо!

2

слушай, я сталкивался с похожей задачей недавно. могу подсказать простой вариант - попробуй использовать setInterval в родительском окне, чтобы периодически проверять, существует ли еще дочернее окно. примерно так:

let childWindow;
let checkInterval;

function openChild() {
  childWindow = window.open('child.html');
  checkInterval = setInterval(checkChild, 500);
}

function checkChild() {
  if (childWindow.closed) {
    clearInterval(checkInterval);
    // тут запускаем нужную функцию
    console.log('дочернее окно закрыто');
  }
}

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

3

Можно попробовать использовать MutationObserver для отслеживания изменений в DOM. Создаем обсервер, который следит за body документа. Когда дочернее окно закрывается, это вызывает изменения в DOM родителя. Примерно так:

let observer = new MutationObserver(() => {
  if (childWindow.closed) {
    console.log('Дочернее окно закрыто');
    observer.disconnect();
    // Ваш код
  }
});

observer.observe(document.body, {childList: true, subtree: true});

Это решение не требует setInterval и работает более эффективно.

4

А что если попробовать использовать window.opener в дочернем окне? Когда оно закрывается, можно отправить сообщение родителю через postMessage. В родительском окне слушаем это событие:

window.addEventListener(‘message’, (event) => {
if (event.data === ‘childClosed’) {
console.log(‘Дочернее окно закрылось’);
// Ваш код
}
});

Это не требует постоянных проверок и работает надежно. Как думаете, подойдет такой вариант?