Як я можу замінити діалогове вікно OnBeforeUnload і замінити його власним?

Мені потрібно попередити користувачів про незбережені зміни, перш ніж вони залишають сторінку (досить поширена проблема).

window.onbeforeunload=handler

Це працює, але воно відкриває діалог за замовчуванням із дратуючим стандартним повідомленням, яке перекриває мій власний текст. Мені потрібно або повністю замінити стандартне повідомлення, щоб текст міг бути зрозумілим, або (ще краще) замінити весь діалог модальним діалогом за допомогою jQuery.

Поки що я провалився, і я не знайшов нікого іншого, хто, здається, має відповідь. Чи можливо це навіть?

Javascript на моїй сторінці:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

Функція closeIt ():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Використовуючи jQuery та jqModal, я спробував такі речі (за допомогою спеціального діалогового вікна підтвердження):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

що також не працює - я, здається, не можу прив’язатись до події перед завантаженням.

Ви не можете змінити діалог за замовчуванням для onbeforeunload, так що найкраще може працювати з ним.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Ось посилання на це від Microsoft:

Коли рядок присвоєно властивість returnValue window.event, з'явиться діалогове вікно, яке дає користувачам можливість залишитися на поточній сторінці та зберегти рядок, який їй був призначений. Заява за замовчуванням, що з'являється у діалоговому вікні "Ви впевнені, що хочете перейти з цієї сторінки? ... Натисніть OK, щоб продовжити, або Скасувати, щоб залишитися на поточній сторінці", не можна видалити або змінити.

Здається, проблема:

1. Коли onbeforeunloadбуде викликано, воно буде приймати повернене значення обробника як window.event.returnValue.
2. Потім воно буде аналізувати повернене значення у вигляді рядка (якщо воно не є нульовим).
3. Оскільки falseпроаналізовано як рядок, діалогове вікно запуститься, яке потім передасть відповідне true/ false.

Результат, як видається , же не бути способом призначення falseдля onbeforeunloadзапобігання його від діалогу за замовчуванням.

Додаткові примітки до jQuery:

• Встановлення події в jQuery може бути проблематичним, оскільки це дозволяє onbeforeunloadтакож відбуватися й інші події. Якщо ви хочете, щоб відбулася ваша подія розвантаження, я б дотримувався звичайного ol 'JavaScript для цього.

• jQuery не має ярлика, onbeforeunloadтому вам доведеться використовувати загальний bindсинтаксис.

  $(window).bind('beforeunload', function() {} );

Редагувати 09.04.2018 : користувацькі повідомлення в діалогових вікнах перед завантаженням застаріли з часу chrome-51 (див .: примітка до випуску )

Що для мене працювало, використовуючи jQuery та перевірені в IE8, Chrome та Firefox, це:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

Важливо не повертати нічого, якщо не потрібно запитувати, оскільки тут є відмінності між IE та іншою поведінкою браузера.

Хоча ви не можете зробити щось із цього поля за певних обставин, ви можете перехопити когось, хто натисне посилання. Для мене це було вартим зусиль для більшості сценаріїв, і як резерв я покинув подію вивантаження.

Я використовував Boxy замість стандартного діалогу jQuery, він доступний тут: http://onehackoraTHER.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

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

Я вирізав код, тому це може не працювати так, як є.

1) Використовуйте для попереднього завантаження, а не для завантаження.

2) Важливим є уникати виконання декларації про повернення. Я не маю на увазі, щоб уникнути повернення з вашого обробника. Ви повертаєте все в порядку, але це робите, гарантуючи, що ви досягнете кінця функції і НЕ виконуєте оператор повернення. За цих умов вбудований стандартний діалог не відбувається.

3) Якщо ви можете використовувати onbeforeunload, ви можете запустити виклик ajax у вашому оброблювальному пристрої для попереднього завантаження, щоб привести в порядок сервер, але він повинен бути синхронним. стан (2) вище). Я це роблю, і це прекрасно працює. Якщо ви робите синхронний ajax-дзвінок, все тримається, поки відповідь не повернеться. Якщо ви робите асинхронний, думаючи, що вам не байдужий відповідь з сервера, розвантаження сторінки триває і ваш виклик Ajax припиняється цим процесом - включаючи віддалений скрипт, якщо він працює.

Спробуйте розмістити return;замість повідомлення .. це працює для більшості браузерів. (Це дійсно запобігає подарункам діалогу)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Зараз це неможливо зробити в хромі, щоб уникнути спаму, див. Javascript onbeforeunload, не показуючи спеціальне повідомлення для отримання більш детальної інформації.

Ви можете визначити, яку кнопку (ok чи скасувати) натиснув користувач, оскільки функція завантаження викликається лише тоді, коли користувач вирішує залишити сторінку. У цьому функціонуванні всі можливості обмежені, оскільки DOM руйнується. Ви можете запускати javascript, але ajax POST нічого не робить, тому ви не можете використовувати цей метод для автоматичного виходу. Але для цього є рішення. Window.open ('logout.php') виконується під час завантаження, тому користувач вийде з нового відкриття вікна.

function onunload = (){
    window.open('logout.php');
}

Цей код викликається, коли користувач залишає сторінку або закриває активне вікно та користувач виходить із системи „logout.php“. Нове вікно негайно закриється, коли PHP виходу складається з коду:

window.close();

Я зіткнувся з тією ж проблемою, я був у порядку, щоб отримати своє власне діалогове вікно зі своїм повідомленням, але проблема, з якою я зіткнулася, полягала в наступному: 1) Це повідомлення було передано на всіх навігаціях, я хочу його лише для близького клацання. 2) з моїм власним повідомленням про підтвердження, якщо користувач вибирає скасувати, воно все ще показує діалогове вікно браузера за замовчуванням.

Далі йде код знайденого рішення, який я написав на своїй сторінці Майстер.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

посилайтесь на http://www.codeprojectdownload.com

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

$(window).one("beforeunload", BeforeUnload);

Кутовий 9 підхід:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

Підтримка веб-переглядачів та видалення користувацького повідомлення:

• Chrome видалила підтримку користувацького повідомлення через версію 51 хв
• Opera видалила підтримку користувацького повідомлення через версію 38 хв
• Firefox видалив підтримку користувацького повідомлення через версію 44.0 хв
• Safari видалив підтримку користувацького повідомлення у версії 9.1 хв