Показывать всплывающее окно, когда пользователь пытается выйти из браузера (стиль GMail)

Question

Я должен сообщить пользователю, когда он пытается выйти из окна браузера. Например, когда вы заходите в GMail и начинаете создавать новое сообщение, а затем пытаетесь закрыть его перед сохранением чего-либо, GMail выдаст вам всплывающее окно, в котором будет что-то вроде:

Вы действительно хотите выйти с этой страницы?

и тогда у вас есть выбор: покинуть страницу или остаться на ней. Так что меня интересует то, как они это сделали и какой трюк они использовали (если есть), когда пользователь нажимает Stay on this page.

Answer 1

Чтобы избежать раздражения пользователей, вы, вероятно, захотите, чтобы состояние было изменяемым, в зависимости от того, выполняется ли операция. Примерно так:

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

Установите для isPerformingOperation значение true, если вы хотите запросить их, и выключите его, когда закончите.

Answer 2

Привязать функцию к onbeforeunload.

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

Должно работать во всех браузерах (протестировано в IE 8, FF 3.6, Chrome 9).

Или с помощью jQuery:

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