Почему окно подтверждения браузера (запускаемое обработчиком события beforeunload) появляется только при нажатии на страницу?

Question

Я хотел бы отобразить окно подтверждения и предупредить пользователя, прежде чем он покинет страницу, особенно во время HTTP-запроса.С этой целью я добавил прослушиватель событий к объекту окна в моем компоненте реакции.

  componentWillMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload(e) {
    e.returnValue = 'You sure you want to leave?';
  }

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

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

Может кто-нибудь объяснить, почему window.onbeforeunload работает, только если я фокусируюсь на странице?

Answer 1

Это намеренное ограничение.От MDN:

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

См .: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload