Подтверждение перед закрытием вкладки / браузера

Question

Как запросить подтверждение у пользователя, прежде чем он уйдет со страницы, как в gmail?

Я искал этот вопрос в разных местах, но все, что они упоминают, - это использование javascript window.unload & window.onbeforeunload. Кроме того, он не работает в Chrome в большинстве случаев, так как он блокируется.

Answer 1

Попробуй это:

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

Вот рабочий jsFiddle

Answer 2

Кратчайшее решение для 2020 года (за исключением тех счастливых людей, которые не должны поддерживать IE)

Протестировано в Chrome, Firefox, Safari.

function onBeforeUnload(e) {
    if (thereAreUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';
        return;
    }

    delete e['returnValue'];
}

window.addEventListener('beforeunload', onBeforeUnload);

Фактически ни один современный браузер (Chrome, Firefox, Safari) не отображает "возвращаемое значение" в качестве вопроса пользователю. Вместо этого они показывают собственный текст подтверждения (это зависит от браузера). Но нам все равно нужно вернуть некоторую (даже пустую) строку, чтобы вызвать это подтверждение в Chrome.

Дополнительные объяснения см. В MDN здесь и здесь.

Answer 3

Попробуй это:

<script>
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
</script>

больше информации здесь MDN.

Answer 4

Я читаю комментарии к ответу, установленному как Хорошо. Большинство пользователей просят разрешить нажатие кнопки и некоторых ссылок. Здесь еще одна строка добавляется к существующему коду, который будет работать.

<script type="text/javascript">
  var hook = true;
  window.onbeforeunload = function() {
    if (hook) {

      return "Did you save your stuff?"
    }
  }
  function unhook() {
    hook=false;
  }

Вызовите unhook() onClick для кнопки и ссылок, которые вы хотите разрешить. Например

<a href="#" onClick="unhook()">This link will allow navigation</a>

Answer 5

Просто

function goodbye(e) {
        if(!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

        //e.stopPropagation works in Firefox.
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        }
    }
window.onbeforeunload=goodbye;

Answer 6

Если вы хотите спросить по условию:

var ask = true
window.onbeforeunload = function (e) {
    if(!ask) return null
    e = e || window.event;
    //old browsers
    if (e) {e.returnValue = 'Sure?';}
    //safari, chrome(chrome ignores text)
    return 'Sure?';
};

Answer 7

1. Скажем, я хочу закрыть окно, если ничего не выбрано
2. Я хочу закрыть окно с чем-то выделенным, но не предлагаю.
3. Я хочу закрыть окно, но что-то выбрано, подскажите пожалуйста.

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

      <pre>
    var ask = true;
    window.onbeforeunload = function(e) {
       if (!ask) return null
       var subtotal = $('#lblgtwithsgst').text();
         if (subtotal != '0') {
          e = e || window.event;
          //old browsers
            if (e) {
             e.returnValue = 'Sure?';
            }
            //safari, chrome(chrome ignores text)
            return 'Sure?';
         }  
      }
      $('#btnPrint').click(function(){
        ask = false;
        ///print your doc no prompt if ask is false;
      )};

Answer 8

Для Angular измените имя формы компонента и вставьте компонент, в котором вам нужно отображать предупреждение.

        @HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    return !this.form.dirty;
  }

Answer 9

      // use jquery version older than 1.6
var preventUnloadPrompt;
var messageBeforeUnload =
  'my message here - Are you sure you want to leave this page?';
$('a').live('click', function () {
  preventUnloadPrompt = true;
});
$('form').live('submit', function () {
  preventUnloadPrompt = true;
});

$(window).bind('beforeunload', function (e) {
  var rval;
  if (preventUnloadPrompt) {
    return;
  } else {
    return messageBeforeUnload;
  }

  return rval;
});