Javascript, управляющий тегом onbeforeunload - PullRequest
Новая
       9

Javascript, управляющий тегом onbeforeunload

2 голосов
/ 23 декабря 2010

Я пытаюсь настроить тег onbeforeunload, чтобы запретить пользователю покидать определенные страницы, если и только если они имеют несохраненный контент и только на определенных страницах (мы используем одну главную страницу). Я быстро обнаружил, что наличие возврата ## any ## в теге onbeforeunload всегда вызывает подтверждение javascript и помещает ## any ## во всплывающее окно. Очевидно, что теперь это ожидаемое поведение, но оно лишает меня идеи использовать мой собственный блок подтверждения, которым можно управлять с помощью оператора if.

Я попробовал это, и это не сработало: 

<body class="yui-skin-sam" onbeforeunload="document.onFormClose();">

<script>
document.onFormClose = function () {
    if (document.getElementById('DirtyFlag').value == "true") {
        document.getElementById('DirtyFlag').value == "false";
        return 'You will lose all changes made since your last save';
    }
}
</script>

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

Итак, мой вопрос: есть ли способ использовать тег onbeforeunload со встроенным возвратом, который будет обходить его до получения значения этого поля? В качестве альтернативы (хотя это было бы не так идеально), я полагаю, я мог бы динамически добавлять или удалять тег onbeforeunload во всех местах, которые я устанавливал или сбрасывал тег getElementById. К сожалению, я тоже не знаю, как это сделать. О, и я полностью ограничен в использовании jQuery или любой другой библиотеки javascript.

Ответы [ 2 ]

3 голосов
/ 23 декабря 2010

Не уверен, что это так, как задумано, но если вы return null из обработчика событий, вы могли бы получить нужные результаты: 

window.onbeforeunload = function() {
    var el = document.getElementById("dirtyFlag");
    if (el.value === "true") {
        return 'You will lose all changes made since your last save';

    }
    else {
        return null;
    }
};

Следующее работает в FF: http://jsfiddle.net/andrewwhitaker/chZJ8/. Попробуйте изменить скрытое значение input s на "true", и вы должны начать получать диалоговое окно подтверждения. Однако , я не могу заставить его работать в Chrome, и я не могу проверить в IE.Было бы здорово, если бы кто-то мог подтвердить, что это работает в любом из этих браузеров.

Редактировать: Добавление другого примера, который проще в использовании и работает в Chrome (iFrame в JSFiddle вызывал проблемы),Посмотрите пример здесь: http://andrewawhitaker.com/examples/onbeforeunload_test.html. Введите «true» во вводе, чтобы увидеть подтверждение.Если 'true' не является значением ввода, диалог не отображается.Работает в FF и Chrome, все еще не может поручиться за IE.

Обновление 2: Более надежный способ сделать это, вероятно, добавить и удалить прослушиватель событий при установке значениядля dirtyFlag программно просто удалите или добавьте обработчик событий соответствующим образом: 

var isDirty = function() { ... };
if (/* form is dirty*/) {
    window.onbeforeunload = isDirty;
}
else {
    window.onbeforeunload = null;
}
1 голос
/ 23 декабря 2010

Вы не можете изменить стандартное поведение onbeforeunload.

https://developer.mozilla.org/en/DOM/window.onbeforeunload

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

...