JavaScript перед тим, як залишити сторінку

233

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

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Але це підтверджується після того, як сторінка вже закрита? Як це зробити правильно?

Ще було б краще, якби хтось показав, як це зробити з jQuery?

javascript jquery

— kd7
джерело

1

ха-ха-ха ... Так, це цілком правильно ... але, на щастя, це не мій сайт ... мій клієнт з проханням зробити це на його стороні

— kd7

25

Так, але я дуже радий бачити ці сповіщення, коли я збираюся вийти зі збереженої сторінки Gmail.

— Etdashou

Зауважте, що в Firefox 4+ відображається лише повідомлення за замовчуванням замість вашого власного розробника

— en-US/docs/Web/Events/beforeunload#Notes

4

Можливий дублікат користувача « Попередити» перед тим, як залишити веб-сторінку із збереженими змінами

— Васим А.

352

onunload(або onbeforeunload) не може перенаправити користувача на іншу сторінку. Це з міркувань безпеки.

Якщо ви хочете показати підказку перед тим, як користувач покине сторінку, скористайтеся onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Або з jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

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

Ви можете використовувати onunloadречі перед завантаженням сторінки, але ви не можете перенаправлятись звідти (Chrome 14+ блокує попередження всередині onunload):

window.onunload = function() {
    alert('Bye.');
}

Або з jQuery:

$(window).unload(function(){
  alert('Bye.');
});

— Ракетний хазмат
джерело

12

@Joseph: Коли ви повертаєте рядок із onbeforeunloadцього веб-переглядача, браузер ставить цю рядок у власне поле підтвердження. Використовувати confirmмарно onunloadі onbeforeunloadтому, що тільки браузер може контролювати, куди йде, а не ви. Ознайомтесь із цією демонстрацією: jsfiddle.net/3kvAC

— Rocket Hazmat

7

Якщо примітка, якщо ви хочете умовно відобразити повідомлення onbeforeunload, return falseзробить браузер відображенням "помилковим" у діалоговому вікні. Вам потрібно, return undefinedякщо ви хочете запустити вікно без попередження користувача.

— Dan Fitch

5

@Adam: Firefox вирішив заборонити налаштування цього повідомлення. Це частина браузера, тому ви не можете перекрити таку поведінку. Інші веб-переглядачі також можуть видаляти можливість налаштування повідомлення. Дивіться: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

— Rocket Hazmat

8

@RocketHazmat Chrome теж є. Зараз це лише говорить: Ви хочете залишити цей сайт? Внесені вами зміни не можуть бути збережені.

— програміст5000

6

@ programmer5000 Це добре, тому що на деяких шкідливих веб-сайтах можуть з’являтись непотрібні попередження (наприклад, "Ви не можете піти, не надавши свої банківські дані")

— Наман

34

Цей код, коли ви також виявляєте, чи змінюється стан форми, чи ні.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Ви можете скористатись функцією Google JQuery Form Serialize, вона збере всі входи форми та збереже їх у масиві. Я думаю, цього пояснення достатньо :)

— Васим А.
джерело

будь-яка ідея, чому це не буде працювати? Чи можна його перезаписати іншими js-функціями / jquery-плагінами? Я запускаю додаток webrtc, і я хотів би "закрити" деякі речі, коли клієнт закриває вікно, таким чином, потрібно обробляти вікно закрити.

— ей

1

це може бути перезаписано будь-яким іншим плагіном тощо. В основному розробник допустив помилку із селектором, якщо ви сумніваєтесь у перезаписі, поставте код jquery перед закриттям тега </body>.

— Васим А.

Так ... якщо у вас є код JS, який приховує або вимикає поля введення після завантаження сторінки, тоді, коли ви зробите перевірку для порівняння прихованих \ відключених полів, не буде серіалізовано. Перевірка звичайно не вдасться. ;) Там це обхідний шлях: stackoverflow.com/a/4748748/114029

— Leniel Маккаферрі

До речі ... є кращий спосіб тут: stackoverflow.com/q/16322042/114029

— Leniel Маккаферрі

1

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

— Адам,

19

Це сповістить про вихід поточної сторінки

<script type='text/javascript'>
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; 

</script>

— Аджит Сінгх
джерело

13

Це те, що я зробив, щоб відобразити повідомлення про підтвердження саме тоді, коли у мене збережені дані

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

повернення "невизначено" відключить підтвердження

Примітка: повернення "null" не працюватиме з IE

Також ви можете використовувати "undefined", щоб відключити підтвердження

window.onbeforeunload = undefined;

— Міна Матта
джерело

11

Для того, щоб мати popop з Chrome 14+, вам потрібно зробити наступне:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Користувача запитають, чи хоче він залишитися чи виїхати.

— Девід Белангер
джерело

Будь-яка ідея, чому це не працює? Я використовую хром (остання версія), а також плагін jquery плагінів, але я не отримую жодного сповіщення, коли закриваю вікно.

— ей

@hey Чому голос "за"? Це працює .... Вам потрібно переконатися, що він знаходиться поза межами, jQuery(document)і я пропоную вставити його відразу після завантаження всіх ваших плагінів. Крім того, цей фрагмент не робить жодного попередження ... це лише демонстрація return.

— Девід Белангер

7

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

window.onbeforeunload = s => "";

Щоб запитати користувача, коли щось на сторінці було змінено, дивіться цю відповідь .

— spencer.sm
джерело

це також спрацьовує, якщо я оновити сторінку або просто вийти?

— Si8

Так, воно буде спрацьовувати під час оновлення чи виходу.

— spencer.sm

Чи все-таки потрібно знати, коли воно оновлено проти першого разу?

— Si8

Коли користувач приходить на сторінку вперше, на противагу оновленню сторінки.

— Si8

О ні. Він не буде звільнений, коли користувач прийде на сторінку вперше. Тільки при закритті чи зміні сторінок або оновлення.

— spencer.sm

4

Зазвичай ви хочете показати це повідомлення, коли користувач вніс зміни у форму, але вони не зберігаються.

Використовуйте такий підхід, щоб показати повідомлення, лише тоді, коли користувач щось змінив

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Саймон Францен
джерело

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Емір Мамашов
джерело

1

Ще трохи корисніше, увімкніть та вимкніть

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
джерело

1

Більшість рішень тут не спрацювали для мене, тому я використовував знайдене тут

Я також додав змінну, щоб дозволити поле підтвердження чи ні

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Радж Шарма
джерело