Как я могу переопределить диалог 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;
});


который также не работает - я не могу привязаться к событию beforeunload.

732   12  

12 ответов:

вы не можете изменить диалог по умолчанию для onbeforeunload, Так что ваш лучший выбор может быть, чтобы работать с ним.

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

вот ссылка к этому от Microsoft:

когда строка присваивается свойству returnValue окна.событие, появляется диалоговое окно, которое дает пользователям возможность оставаться на текущей странице и сохранить строку, которая была назначена ему. Оператор по умолчанию, который появляется в диалоговом окне: "вы уверены, что хотите чтобы перейти от этой страницы? ... Нажмите кнопку ОК, чтобы продолжить, или отмена, чтобы остаться на текущей странице."не может быть удален или изменен.

проблема, кажется:

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

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

дополнительные примечания по jQuery:

  • установка события в jQuery мая быть проблематично, так как это позволяет другим onbeforeunload событий, а также. Если вы хотите, чтобы произошло только ваше событие выгрузки, я бы придерживался простого JavaScript для оно.
  • jQuery не имеет ярлыка для onbeforeunload Так что вам придется использовать универсальный bind синтаксис.

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

редактировать 09/04/2018: пользовательские сообщения в диалогах onbeforeunload устарели с chrome-51 (cf:версии)

Оуэн является правильным. И, причина этого-безопасность. Предотвращение выгрузки страницы полезно в веб-формах и т. д., но оно может легко использоваться вредоносным сайтом, чтобы обмануть пользователя, чтобы он оставался на странице. Вот почему веб-браузеры реализуют стандартное сообщение и имеют этот механизм для вставки пользовательского текста.

что сработало для меня, используя jQuery и протестированы в IE8, Chrome и Firefox, это:

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

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

хотя в некоторых случаях вы ничего не можете сделать с коробкой, вы можете перехватить кого-то, нажав на ссылку. Для меня это стоило усилий для большинства сценариев, и в качестве запасного варианта я оставил событие выгрузки.

Я использовал Boxy вместо стандартного диалога jQuery, он доступен здесь:http://onehackoranother.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) Используйте onbeforeunload, а не onunload.

2)важно избегать выполнения оператора return. Я не имею в виду, чтобы избежать возвращения от вашего обработчика. Вы возвращаете все правильно, но вы делаете это, гарантируя, что вы достигнете конца функции и не выполняете оператор return. В этих условиях встроенный стандартный диалог не происходит.

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

попробуйте разместить return; вместо сообщения.. это работает большинство браузеров для меня. (Это только действительно предотвращает подарки диалога)

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

вы можете определить, какая кнопка (ok или отмена) нажата пользователем, потому что функция onunload вызывается только тогда, когда пользователь выбирает выход из страницы. Хотя в этой функции возможности ограничены, потому что DOM рушится. Вы можете запустить javascript, но сообщение ajax ничего не делает, поэтому вы не можете использовать этот метод для автоматического выхода из системы. Но для этого есть решение. Окно.открыть ('выход из системы.php') выполняется в функции onunload, поэтому пользователь выйдет из системы с помощью открытие нового окна.

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

этот код вызывается, когда пользователь покидает страницу или закрывает активное окно и пользователь выходит из системы с помощью 'logout.php'. Новое окно закрывается сразу же, когда выход php состоит из кода:

window.close();

я столкнулся с той же проблемой, я был в порядке, чтобы получить свое собственное диалоговое окно с моим сообщением, но проблема я столкнулся, было : 1) он давал сообщение на всех навигациях я хочу его только для close click. 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;

Это не может быть сделано в chrome сейчас, чтобы избежать спама, обратитесь к javascript onbeforeunload не показывает пользовательское сообщение для более подробной информации.

 <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

У меня была эта же проблема и это сводило меня с ума. Я хотел полностью избавиться от всплывающего окна, потому что я не хотел предупреждать пользователя-просто возьмите их из формы на новую страницу. Я попробовал приведенные выше ответы и не смог заставить их работать.

В конце концов, я получил это, чтобы игнорировать всплывающее окно firefox по умолчанию, с помощью этого сайта:http://code-maven.com/prevent-leaving-the-page-using-plain-javascript. он добавляется перед перенаправлением окна:

window.onbeforeunload = function() {
    if (data_needs_saving()) {
         return "";
    } else {
         return "";
    }
};
window.location.href = 'www.redirect here';

Как насчет использования специализированной версии команды" bind ""one". Как только обработчик событий выполняется в первый раз, он автоматически удаляется как обработчик событий.

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

Comments

    Ничего не найдено.