Почему $ (window).on('beforeunload', обратный вызов); больше не запускает мой вызов ajax в Chrome после обновления до 73.0.3683.103?

#javascript #ajax #google-chrome

Вопрос:

В нашем веб-приложении мы используем вызов ajax, который запускается при событии beforeunload, чтобы отслеживать, продолжает ли пользователь работать с определенной информацией. Это примерно выглядит так:

 $(window).on('beforeunload', function() {
    $.ajax({
               async: false,
               url: "../orderInformation/assignOrder",
               data: {
                   orderId: orderId,
                   shouldAssign: false
               }
           });
    console.info("Handled beforeunload");
});

До сегодняшнего дня это нормально работало в Chrome, IE и Firefox. Начиная с версии Chrome 73.0.3683.103, вызов Ajax больше не запускается, хотя остальная часть JS в этом обработчике выполняется. Т.е. Сообщение выводится на консоль.

Панель инструментов разработчика Chrome не показывает, что вызов AJAX выполняется в версии 73.0.3683.103, и я подтвердил, что наш веб-сервер также не получил запрос. Однако, когда я запускаю тот же код в Chrome 73.0.3683.86, он запускает Ajax-запрос, и веб-сервер его получает! Я подтвердил, что это изменение влияет как на Mac OS, так и на Windows.

Что изменилось в Chrome 73.0.3683.103, что вызвало эту проблему? И / или как мне это исправить?

Это было доведено до нашего сведения серией обращений в службу поддержки от наших клиентов, поскольку это негативно повлияло на работу нашего приложения. Впервые за мою 11-летнюю карьеру разработчика веб-приложений мне пришлось сказать нашим пользователям переключиться на Internet Explorer.

1. Я не уверен, что изменилось, но я совсем не удивлен. Правильный метод для отправки такого рода запросов developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

2. Помогут ли здесь маяки ?

3. Я попробую это немедленно. Мне придется добавить его в дополнение к beforeunload, так как ресурс @KevinB говорит, что IE его не поддерживает. Кроме того, обратная связь приветствуется при голосовании против.

4. Я бы просто быстро проверил метод sendBeacon. Если он существует, используйте его, иначе вернитесь к xhr

5. В итоге я нашел следующий обходной путь : var img = document.createElement('img'); img.src = url; document.body.appendChild(img); . Он по-прежнему выполняет синхронный вызов ajax из события выгрузки в Chrome 73.0.3683.103

Ответ №1:

Я тоже столкнулся с этим. Я нашел твит, в котором говорится, что поддержка синхронного xhr была удалена из событий закрытия страницы в Blink, который использует браузерный движок Chrome. Это произошло в начале апреля. Очень вероятно, что Chrome 73.0.3683.103 работает на версии Blink, в которой это удалено. sendBeacon и fetch keepalive — это новые рекомендуемые методы запуска ajax при загрузке страницы.

Твит, о котором идет речь

Ответ №2:

Мой обходной путь с использованием beacon — асинхронный вызов

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

 if (navigator amp;amp; navigator.sendBeacon) {
    navigator.sendBeacon(url);
    return;
}

Обходной путь, упомянутый Ильдаром Фаизовым — синхронный вызов

Я не тестировал это, но, как сообщается, это работает и выполняет синхронный вызов ajax.

 var img = document.createElement('img');
img.src = url;
document.body.appendChild(img);