Как предотвратить закрытие окна браузера? - PullRequest
Новая
       13

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

50 голосов
/ 02 декабря 2008

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

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

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

Ответы [ 3 ]

45 голосов
/ 02 декабря 2008

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

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

30 голосов
/ 02 декабря 2008

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

$(function () {
  $("a").click(function {
    window.onbeforeunload = null;
  });
});
6 голосов
/ 13 января 2016

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

  • Попытка обновить страницу.
  • Попытка закрыть вкладку браузера.
  • Попытка закрыть окно браузера.
  • Введите еще один 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 listener, а в других вы используете оператор return.

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

...