Отображать пользовательское поле оповещения, например, facebook, когда вы переходите на другую страницу

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

 window.onbeforeunload = function(){
    return "are you sure?";
 }

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

 window.onbeforeunload = function(){
    myownalertbox.show();  //here I want to bind leave page or stay on page button with my own button.
 }

И я хочу привязать пребывание на этой странице и оставить эту кнопку на моей кнопке.

Ответы

Ответ 1

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

Использование обработчика onbeforeunload невозможно для достижения вашей цели, потому что ему нужно запускать "синхронно": вы не можете отображать предупреждение, возвращать что-то, а затем позже с некоторым обратным вызовом возвращаться и возвращать фактическое значение. Когда вы вернетесь из функции, результат будет использоваться браузером, и вы получите отображаемое пользовательское поле оповещения, но действие пользователя будет "потеряно", потому что обработчик уже завершен.

Чтобы идти дальше, я никогда не мог найти какое-либо решение, которое предоставило бы настраиваемое окно предупреждения, которое ведет себя синхронно в этом смысле. По синхронному поведению я подразумеваю, что выполнение кода будет заблокировано до тех пор, пока пользователь не нажмет на кнопки предупреждения. Каждое пользовательское предупреждение/подтверждение/подсказку, которое я видел, использует обратные вызовы. И последнее, но не менее важное: JavaScript даже не обеспечивает способ для "ожидания блокировки".

UPDATE

Что вы можете сделать (и Facebook делает это тоже) - это обрабатывать навигационные ссылки, кнопки, клики и т.д., которые, как вы знаете, оставят страницу, и там вы можете показать окно пользовательского подтверждения.

Примечание. На самом деле я пробовал Facebook, и для меня (Windows 10, Chrome latest) он запрашивает окно подтверждения по умолчанию, когда я пытался закрыть вкладку браузера, а не какой-либо пользовательский. Но когда я нажал на ссылку, она действительно показала пользовательское окно подтверждения. Итак, чтобы подвести итог, Facebook, когда это возможно, использует пользовательский, и когда это невозможно (только при onbeforeunload, например, закрытии браузера, закрытии табуляции, перезагрузке страницы, навигации по URL-адресу и т.д.), Он использует механизм обработки по умолчанию.

Примечание 2. На 2016 год кажется, что все основные браузеры решили не разрешать разработчикам настраивать сообщение, которое отображается на onbeforeunload, поэтому возвращаемое значение string от обработчика не будет принятое как сообщение. Об этом есть несколько статей. Основная причина - безопасность, так как многие сайты использовали ее для обмана наивных пользователей и просят их сделать некоторые действия или вызвать вредоносный контент и т.д. Теперь все основные браузеры отображают сообщение по умолчанию о возможностях несохраненных изменений.

Ответ 2

Оригинальный ответ подходит для IE6-8 и FX1-3.5, но сейчас устарел и не будет работать в большинстве современных браузеров. Я оставил его ниже для справки.

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

Вы устанавливаете 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;

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

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

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

window.onbeforeunload = null;

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

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

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

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Ответ 3

Я бы использовал обычный макет HTML и играл с CSS display:none;/display:block;

Например (вы делаете свой стиль):

CSS

.popup {
  display: none;
  position: absolute;
  left: 20%;
  top: 20%;
  height: 60%;
  width: 60%;
  background-color: orange;
}

JAVASCRIPT:

var myownalertbox = {

  show: function(message) {
    var popup = document.createElement("DIV");
    popup.className = "popup";
    document.body.appendChild(popup);
    popup.style.display = "block";
    popup.innerHTML = message;
    var ybutton = document.createElement("BUTTON");
    ybutton.innerHTML = "YES";
    var nbutton = document.createElement("BUTTON");
    nbutton.innerHTML = "NO";
    ybutton.onclick = function () {
     // do with "YES"
     window.location = "/main.html"; // <-- go back to the main page
     popup.style.display = "none";
    }
    nbutton.onclick = function () {
     // do with "NO"
     window.location = "#"; // <-- stay at this page
     popup.style.display = "none";
    }
    popup.appendChild(ybutton);
    popup.appendChild(nbutton);
  }
}

myownalertbox.show("ARE YOU SURE?");

Здесь JSFiddle.

Ответ 4

Вы можете попробовать этот сайт. http://t4t5.github.io/sweetalert/ Это не настраиваемый блок оповещений, но он предоставляет окно с предупреждением, которое действительно красиво.