Как показать, “Вы уверены, что хотите перейти далеко от этой страницы?” когда изменения фиксируются?

Я - действительно не поклонник $(document).ready(fn) ярлык. Уверенный это сокращает код, но это также сокращает путь на удобочитаемости кода. Когда Вы видите $(document).ready(...), Вы знаете то, на что Вы смотрите. $(...) используется слишком многими другими способами сразу иметь смысл.

, Если у Вас есть несколько платформ, можно использовать jQuery.noConflict();, как Вы говорите, но можно также присвоить различную переменную для него как это:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Очень полезный, если у Вас есть несколько платформ, которые могут быть сведены к $x(...) - вызовы стиля.

251
задан sshow 30 April 2014 в 02:29
поделиться

8 ответов

Обновление (2017)

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

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

Прочтите ниже, чтобы узнать о поддержке устаревших браузеров.

Обновление (2013)

Исходный ответ подходит для IE6-8 и FX1- 3.5 (это то, на что мы нацеливались еще в 2009 году, когда он был написан), но сейчас он скорее устарел и не будет работать в большинстве современных браузеров - я оставил его ниже для справки.

window.onbeforeunload не обрабатывается одинаково всеми браузерами. Это должна быть ссылка на функцию, а не строка (как указано в исходном ответе), но она будет работать в старых браузерах, потому что проверка большинства из них заключается в том, назначено ли что-либо для onbeforeunload (включая функцию который возвращает null ).

Вы устанавливаете window.onbeforeunload как ссылку на функцию, но в старых браузерах вы должны вместо этого установить returnValue события просто вернуть строку:

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

Вы не можете заставить confirmOnPageExit выполнить проверку и вернуть null, если вы хотите, чтобы пользователь продолжил работу без сообщения. Вам все равно нужно удалить событие, чтобы надежно включать и выключать его:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

Исходный ответ (работал в 2009 году)

Чтобы включить:

window.onbeforeunload = "Are you sure you want to leave?";

Чтобы выключить:

window.onbeforeunload = null;

Имейте в виду, что это не это нормальное событие - можно t привязать к нему стандартным способом.

Проверить значения? Это зависит от вашей среды проверки.

В jQuery это может быть что-то вроде (очень простой пример):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});
350
ответ дан 23 November 2019 в 02:54
поделиться

Существует параметр «onunload» для тега body, из которого вы можете вызывать функции javascript. Если он возвращает false, он предотвращает переход.

-1
ответ дан 23 November 2019 в 02:54
поделиться

Это легко сделать, установив для ChangeFlag значение true в событии onChange в TextArea . Используйте javascript для отображения диалогового окна подтверждения на основе значения ChangeFlag . Отмените форму и перейдите к запрошенной странице, если confirm вернет истину, иначе ничего не делать .

0
ответ дан 23 November 2019 в 02:54
поделиться

Вы можете добавить событие onchange в текстовое поле (или любые другие поля), которое устанавливает переменную в JS. Когда пользователь пытается закрыть страницу (window.onunload), вы проверяете значение этой переменной и соответственно показываете предупреждение.

1
ответ дан 23 November 2019 в 02:54
поделиться

То, что вы хотите использовать, это событие onunload в JavaScript.

Вот пример: http://www.w3schools.com/jsref/event_onunload.asp

0
ответ дан 23 November 2019 в 02:54
поделиться

Когда пользователь начинает вносить изменения в форму, устанавливается логический флаг. Если затем пользователь пытается уйти со страницы, вы проверяете этот флаг в событии window.onunload . Если флаг установлен, вы показываете сообщение, возвращая его в виде строки. При возврате сообщения в виде строки появится диалоговое окно подтверждения, содержащее ваше сообщение.

Если вы используете ajax для фиксации изменений, вы можете установить флаг в false после того, как изменения были зафиксированы (т.е. событие успеха ajax).

2
ответ дан 23 November 2019 в 02:54
поделиться

С JQuery это довольно просто сделать. Так как можно привязать к сетам.

Этого НЕ достаточно, чтобы выполнить операцию onbeforeunload, вы хотите, чтобы функция навигации запускалась только в том случае, если кто-то начал редактировать материал.

18
ответ дан 23 November 2019 в 02:54
поделиться

Microsoft-ism onbeforeunload ближе всего к стандартному решению, но имейте в виду, что поддержка браузерами неравномерна; например, для Opera он работает только в версии 12 и более поздних (все еще в стадии бета-тестирования на момент написания этой статьи).

Кроме того, для максимальной совместимости вам нужно сделать больше, чем просто вернуть строку, как описано на Сеть разработчиков Mozilla .

Пример: Определите следующие две функции для включения / выключения подсказки навигации (см. пример MDN):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

Затем определите форму, подобную этой:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

Таким образом, пользователь будет предупрежден об уходе, только если он изменил текстовую область, и не будет получать запрос, когда он фактически отправит форму.

37
ответ дан 23 November 2019 в 02:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: