Обновление основной страницы при закрытии всплывающего окна JS

Быстрый ответ

Если стоит задача обновить основную страницу после закрытия всплывающего окна, то для этого подойдёт использование JavaScript метода window.open(), который всегда будет срабатывать в паре с событием window.onunload. Ниже представлен код, реализующий это:

function openPopupAndRefreshParent() { 
  var popup = window.open('popup.html', 'Popup', 'width=600,height=600');
  popup.onunload = function() {
    if(!popup.closed) {
      window.opener.location.reload(); // Начинаем всегда с чистого листа
    }
  };
}

Вызывайте функцию openPopupAndRefreshParent() в коде там, где это нужно – например, по нажатию кнопки на основной странице, чтобы основная страница автоматически обновилась при закрытии всплывающего окна.

Продвинутые техники регулирования работы всплывающих окон

Для контроля над состояниями всплывающих окон и улучшения взаимодействия с ними используйте событие window.onunload, хотя и аккуратно, поскольку его поведение может отличаться в зависимости от браузера. Сделайте взаимодействие с окном умным и изящным при помощи window.onbeforeunload. Не забывайте также учесть случайные блокировки всплывающих окон.

Надёжное обнаружение закрытия окна

Событие onunload недостаточно устойчиво работает во всех браузерах. Более надежным будет использование следующего подхода:

function openPopupAndRefreshParent() {
  var popup = window.open('popup.html', 'Popup', 'width=600,height=600'),
      interval = setInterval(function() {
        if (popup.closed) {
          clearInterval(interval);
          window.location.reload(); // Новый взгляд начинается с обновления страницы!
        }
      }, 100); // Настраиваем скорость проверки под свои потребности
}

Подробнее об этом расскажет наш спикер на видео

Ответственное использование всплывающих окон

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

function refreshParentAndClosePopup() {
  window.opener.location.reload(); // Проветрим страницу!
  window.close(); // Прощай, окно!
}

Аналогичные действия на jQuery:

$('#saveButton').click(function() {
  window.opener.location.reload();
  window.close();
});

Соблюдение Политики Одного источника

Браузеры строго соблюдают Политику Одного источника (SOP) в целях обеспечения безопасности. Удостоверьтесь в том, что URL родительской страницы и всплывающего окна совпадают, если специальные механизмы безопасного междоменного взаимодействия через postMessage() не настроены.

Пользовательский опыт обновления страницы

Обновление страницы через всплывающее окно может быть вне поля зрения пользователя. Сохраняйте данные пользователя и состояние, такова основа. После значительных изменений в всплывающем окне выполняйте полное обновление с помощью window.opener.location.reload(true).

Таймированные действия: пользовательское взаимодействие прежде всего

Дайте пользователям мгновение перед обновлением страницы:

window.onbeforeunload = function() {
  setTimeout(function() {
    window.opener.location.reload();
  }, 1000); // Сделаем небольшую паузу для дыхания
};

Всегда тестируйте ваше решение в различных браузерах и учитывайте возможные различия в обработке событий onunload и window.close().

Визуализация

Всплывающее окно можно представить как дверь (🚪), а основную страницу — как дом (🏠):

🏠 Открываем дверь (🚪): входим во всплывающее окно

Действия внутри всплывающего окна:

🚪 ➡️ 🎨 Вносим изменения внутрь всплывающего окна

По завершении, возвращаемся домой, преобразившись и обновившись:

🚪 🔒 Обновляем дом (🏠): основная страница перезагружается

Такая метафора поможет вам наглядно представить себе взаимодействие между всплывающим окном и основной страницей.

Советы по оптимизации взаимодействия с всплывающим окном

Настройка размера всплывающего окна

Обращайте большое внимание на размер и расположение всплывающего окна, поскольку от этого напрямую зависит удобство пользовательского пребывания на сайте. Такие параметры как width, height, left и top, помогут вам максимально эффективно его настроить.

Привлекаем внимание пользователя

Сразу же после открытия окна используйте popup.focus(), чтобы всплывающее окно моментально привлекло внимание пользователя, и тем самым, избежать случайных кликов по основной странице.

Программное закрытие всплывающего окна с главной страницы

Если потребуется закрыть всплывающее окно с родительской страницы:

var popupRef;

function openPopup() {
  popupRef = window.open(...);
}

function closePopup() {
  if (popupRef) {
    popupRef.close();
    popupRef = null; // Глава закрывается!
  }
}

Замена на модальные диалоги

Если использование всплывающих окон вас не удовлетворяет по каким-либо причинам, ими можно заменить модальные окна, которые создаются с помощью HTML, CSS и JavaScript. Эти элементы более естественно встраиваются в DOM-структуру страницы и реже вызывают блокировки со стороны браузера.

Полезные материалы

1. Метод Window: open() – Web API | MDN — Информация о методе open() в JavaScript.
2. Метод Window: postMessage() – Web API | MDN — Описание междоменного взаимодействия с помощью postMessage().
3. Как создать модальное окно с помощью CSS и JavaScript — Учебник по созданию модальных окон.
4. Всплывающие окна и методы управления окнами — Различные подходы к использованию всплывающих окон и методов в JavaScript.
5. Отображение модальных окон: рекомендации | CSS-Tricks — Рекомендации по стилизации модальных окон.
6. Виджет "Диалог" | Документация jQuery UI — Об использовании метода диалога в jQuery UI для работы с модальными окнами.
7. Can I use... База данных поддержки для HTML5, CSS3, и др. — Проверка поддержки браузерами метода postMessage.