Какой самый ненавязчивый способ реализовать пользовательское диалоговое окно "beforeunload"?

Question

Я говорю о стилизованном диалоге вместо стандартного диалога beforeunload, который не может быть стилизован.

Смотрите Facebook:

Какой самый ненавязчивый способ сделать это? Предпочтителен какой-то скрипт, который я объявляю один раз, и волшебным образом всегда работает.

Я думаю о чем-то вроде:

function showCustomDialog()
{
    [...]
}

var unfinished = true;

$('a').click(function()
{
    if ( unfinished )
    {
        window.showCustomDialog( { originalUrl: $(this).attr('href') } );
        return false;
    }
}

Но я боюсь, что это сломает случаи, когда то есть <a> Элемент используется для запуска JS-поведения или там, где JavaScript вызывает изменение window.location.href.

Есть ли лучший, ненавязчивый способ?

Дополнительное примечание- они также получили это работает для кнопки назад.

Дополнительное примечание - по-видимому, они возвращаются к диалогу по умолчанию, когда он находится вне их контроля.

Answer 1

Я думаю, что главная проблема заключается в том, что вы не можете предсказать каждое изменение в DOM, поэтому вы можете легко обновлять каждое событие mousemove (событие touch для смартфонов и т. Д.), Например, так:

$(document).off('mousemove').mousemove(function(){
      $('a').off('click').click(function(e){
           e.preventDefault();

           //your dialog goes here

      });
});