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

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

window.onbeforeunload = confirmExit;
function confirmExit() {
  return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}

Это работает, но если страница содержит одну гиперссылку, нажатие на эту гиперссылку вызывает одно и то же предупреждение. Мне нужно показать предупреждение только после закрытия окна браузера, а не при нажатии гиперссылок.

Ответ 1

Сохраните свой код как есть и используйте jQuery для обработки ссылок:

$(function () {
  $("a").click(function {
    window.onbeforeunload = null;
  });
});

Ответ 2

Другая реализация заключается в следующем: вы можете найти ее на этой веб-странице: http://ujap.de/index.php/view/JavascriptCloseHook

<html>
  <head>
    <script type="text/javascript">
      var hook = true;
      window.onbeforeunload = function() {
        if (hook) {
          return "Did you save your stuff?"
        }
      }
      function unhook() {
        hook=false;
      }
    </script>
  </head>
  <body>
    <!-- this will ask for confirmation: -->
    <a href="http://google.com">external link</a>

    <!-- this will go without asking: -->
    <a href="anotherPage.html" onClick="unhook()">internal link, un-hooked</a>
  </body>
</html>

Что он делает - вы используете переменную как флаг.

Ответ 3

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

Попытка обновить страницу.
Попытка закрыть вкладку браузера.
Попытка закрыть окно браузера.
Введен другой URL-адрес в строке URL и нажмите enter.

Все эти действия генерируют событие beforeunload на window без получения более точной информации о событии.

Чтобы отобразить диалоговое окно подтверждения при выполнении вышеуказанных действий и не отображать его при нажатии гиперссылки, выполните следующие действия:

Присвоить beforeunload прослушиватель событий window, который возвращает текст подтверждения как строку, если для определенной переменной (флага) не установлено значение true.
Назначьте событие click document. Проверьте, был ли нажат элемент a (event.target.tagName). Если да, установите флаг true.

Вы также должны обрабатывать представления форм, назначая прослушиватель событий submit на document.

Ваш код может выглядеть так:

let disableConfirmation = false;
window.addEventListener('beforeunload', event => {
  const confirmationText = 'Are you sure?';
  if (!disableConfirmation) {
    event.returnValue = confirmationText; // Gecko, Trident, Chrome 34+
    return confirmationText;              // Gecko, WebKit, Chrome <34
  } else {
    // Set flag back to false, just in case
    // user stops loading page after clicking a link.
    disableConfirmation = false;
  }
});
document.addEventListener('click', event => {
  if (event.target.tagName.toLowerCase() === 'a') {
    disableConfirmation = true;
  }
});
document.addEventListener('submit', event => {
  disableConfirmation = true;
});

<p><a href="#" onclick="location.href='https://stacksnippets.net/'; return false;">google.com</a></p>
<form action="https://stacksnippets.net/"><button type="submit">Submit</button></form>
<p>Try clicking the link or the submit button. The confirmation dialog won't be displayed.</p>
<p>Try reloading the frame (right click -> "Reload frame" in Chrome). You will see a confirmation dialog.</p>