Chrome отклоняет запросы на подтверждение () немедленно, без участия пользователя

Question

Некоторые пользователи нашего сайта сообщают, что confirm диалоговые окна появляются, но сразу исчезают, как если бы они были автоматически закрыты. Это влияет только на Chrome, но не на другие браузеры (даже на Chromium).

Поиск похожих вопросов приводит к тому, что многие жалуются confirm диалоги внутри onbeforeunload, но это не моя проблема: это не в такой ситуации. confirm диалоговое окно отображается при начальной загрузке страницы (запускается jQuery $(document).ready()).

Документация Chrome показывает, что confirm не будет активировать свою вкладку и будет отклонен, когда вкладка переключается с. Это нормально: вкладка уже активна (confirm появляется диалоговое окно при загрузке страницы), и я рад, что его закрывают, когда вкладка переключается с. Проблема заключается в том, что он закрывается немедленно, без какого-либо взаимодействия с пользователем.

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

$(document).ready(function() {
var c = confirm('Are you sure you wish to delete this entry?');
if (c) {
    $.ajax(
        '/api/show/competition/delete',
        {
            'method': 'POST',
            'data': { 'id' : 9 },
            'dataType': 'json',
            'complete': function(response, status) {
                if (response.responseJSON.error) {
                    alert(response.responseJSON.message);
                    window.location.reload();
                } else {
                    document.location.href = "/show/application/competition";
                }
            }
        }
    );
} else {
    document.location.href = "/show/application/competition/entry/9";
}
});

---

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

Answer 1

У меня была точно такая же проблема. Это похоже на проблему с хромом.

Это требует хитрости. В моем случае это сработало, поместив задержку в 0,1 секунды с помощью функции setTimeout.

Попробуй это. Это будет работать.

function doConfirm() {
  var c = confirm('Are you sure you wish to delete this entry?');
  if (c) {
    $.ajax(
        '/api/show/competition/delete',
        {
            'method': 'POST',
            'data': { 'id' : 9 },
            'dataType': 'json',
            'complete': function(response, status) {
                if (response.responseJSON.error) {
                    alert(response.responseJSON.message);
                    window.location.reload();
                } else {
                    document.location.href = "/show/application/competition";
                }
            }
        }
    );
  } else {
    document.location.href = "/show/application/competition/entry/9";
  }
}

$(document).ready(function() {
  setTimeout(function(){ doConfirm() }, 100);    
});

Answer 2

В моем случае проблема была вызвана iframe. У меня было видео iframe на YouTube, и предупреждение показывалось через несколько миллисекунд. После удаления iframe все снова заработало нормально.

Answer 3

В моем случае источником проблемы был пиксель ремаркетинга Facebook.

Answer 4

В моем случае проблема возникала в диалоговом окне подтверждения в функции события щелчка. Замена "щелчка" на "мышка" решила проблему.

Answer 5

Несколько более элегантный, но эффективный способ добавления тайм-аута - это включить библиотеку, например https://underscorejs.org/, и отклонить функцию обработчика на ~100 мс. Если у вас есть iFrame, это может быть не так, но без него это определенно проблема, и это сработало для меня мгновенно.

$("#my-selector").on("click", _.debounce(handleClick, 100));