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

StackOverflow https://stackoverflow.com/questions/333665

Вопрос

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

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?";
}

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

Это было полезно?

Решение

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

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

Другие советы

Другая реализация заключается в следующем, вы можете найти его на этой веб-странице: 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>

Он использует переменную в качестве флага.

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

  • Предпринял попытку обновить страницу.
  • Попытался закрыть вкладку браузера.
  • Попытался закрыть окно браузера.
  • Введите другой 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="https://stacksnippets.net/">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>

Обратите внимание, что в некоторых браузерах вам приходится использовать event.returnValue в beforeunload слушатель, а в других случаях вы используете return заявление.

Смотрите также beforeunload документы о событиях.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top