Почему beforeunload не отправляет запросы в браузере Safari?
Есть запрос, который при отправке сохраняет данные в базу. Нужно, чтобы когда пользователь обновляет страницу, данные тоже сохранялись. Использую такое событие, как befoureunload. В Chrome и Firefoox всё окей, а вот с Safari беда. Он не обрывает запросы или будто не ждет их завершения и сыпет ошибку "Network Error", из-за чего они не доходят до сервера. Запрос методом POST шлю через axios, пробовал через fetch (понятное дело, одно и то же). Пробовал сделать worker, но опять в Chrome и Firefox работает, а в Safari нет.
Дополнительно:
Посмотрите на Beacon API. Он как раз предназначен для аналитики.
А обычные запросы браузер имеет полное право обрывать потому что полагает что в нём уже нет никакого смысла раз вы покидаете страницу.
А ещё в MDN прелагают использовать событие visibilitychange вместо beforeunload.
https://developer.mozilla.org/en-US/docs/Web/API/N...
- Конечно хорошо, но к сожалению это не то, что мне нужно. visibilitychange срабатывает когда пользователь сворачивает окно или переключается на другую вкладку, мне нужно на обновление страницы.
Вообщем получилась подобная история рабочая в Safari и во всех остальных браузерах. (для тех кому в дальнейшем это будет интересно)
window.addEventListener('beforeunload', (event) => { navigator.sendBeacon("/save", data); }); |
window.addEventListener('beforeunload', (event) => { navigator.sendBeacon("/save", data); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с особенностью работы события beforeunload в браузере Safari. По умолчанию, Safari блокирует отправку запросов при использовании этого события в целях предотвращения нежелательных действий пользователя.
Однако, существует способ обойти это ограничение. Вам необходимо использовать технику AJAX для отправки запросов перед тем, как пользователь покинет страницу. Пример кода на PHP для отправки AJAX запроса при событии beforeunload в браузере Safari выглядит следующим образом:
window.addEventListener('beforeunload', function (e) { e.preventDefault(); e.returnValue = ''; var xhr = new XMLHttpRequest(); xhr.open('POST', 'your_url_here', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { console.log('Request sent successfully'); } else { console.error('Failed to send request'); } } }; xhr.send(JSON.stringify({data: 'your_data_here'})); });
Обратите внимание, что вам необходимо заменить 'your_url_here' на URL вашего сервера, куда будет отправлен запрос, а также 'your_data_here' на данные, которые вы хотите передать.
Таким образом, вы сможете отправлять запросы при событии beforeunload в браузере Safari и решить проблему блокировки отправки запросов. Надеюсь, это решение поможет вам!