Как перехватить событие загрузки для окна после location.replace (изменение URL)

Question

Итак, я открыл окно с window.open('https://example.com/foo').Я нахожусь в том же домене и должен прослушать событие загрузки.

Событие загрузки срабатывает для первого window.open, но я не могу получить другое событие, когда я изменяю URL с помощью window.replace('https://example.com/bar')

CodeSandbox

1. Откройте консоль браузера
2. Нажмите кнопку открытия (просмотрите журнал в консоли)
3. Нажмите кнопку переключения (обратите внимание, что ничего не регистрируется)

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

let open = null;
document.getElementById('open-button').addEventListener('click', () => {
  open = window.open('https://523k29z484.codesandbox.io/pages/foo.html');
  open.addEventListener('load', () => console.log('this fires'));
});

document.getElementById('switch-button').addEventListener('click', () => {
  open.addEventListener('load', () => console.log('before change does not fire'));
  open.location.replace('https://523k29z484.codesandbox.io/pages/bar.html');
  open.addEventListener('load', () => console.log('after change does not fire'));
});

Answer 1

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

open.location.replace('https://211vv50z30.codesandbox.io/pages/bar.html');

// old page unloaded
open.addEventListener('unload', () => {
  // we can only add the load event after one tick
  setTimeout(() => {
    open.addEventListener('load', () => console.log('gotcha'));
  }, 0);
});

location.replace -> unload -> setTimeout (один тик) -> load

CodeSandbox