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

Як запитати підтвердження у користувача, перш ніж він покине сторінку, як у Gmail?

Я шукав це запитання в різних місцях, але все, що вони згадують, це використання javascript window.unload & window.onbeforeunload . Крім того, він не працює в хромі в більшості випадків, оскільки блокується.

Спробуйте це:

<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

Спробуйте це:

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

більше інформації тут MDN .

Я читав коментарі до відповіді, встановленої як " Добре" . Більшість користувачів просять дозволити кнопку та деякі посилання. Тут до існуючого коду додається ще один рядок, який буде працювати.

<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>

Найкоротша рішення для 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 тут і тут .

Просто

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;

Якщо ви хочете запитати на основі умови:

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