Вы знаете, как отправить сообщение в фоновом режиме, когда страница закрыта?

внешний интерфейс JavaScript
Вы знаете, как отправить сообщение в фоновом режиме, когда страница закрыта?

Это 16-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

нужно

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

После анализа, разве это не просто отправка запроса при выгрузке страницы?

window.addEventListener("beforeunload", () => {
let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "编程三昧"}));

Тест найден:

  • В основном удовлетворяет потребности при обновлении страницы (иногда фон не может принимать запросы, но вероятность очень мала)
  • При закрытии страницы фон не получает запросы

Так как асинхронный Ajax не работает, то попробуйте синхронный, и в результате будет ошибка:

Сделал поиск и объяснил это следующим образом:

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

Подводя итог: для текущего Chrome синхронные запросы XHR не разрешены, когда пользователь уходит или закрывает страницу.

Хотя проблема не решена, но она получила знания, эта волна не так уж и плоха!

navigator.sendBeacon()

Позже, через поиск, я увидел, что есть интерфейс, предназначенный для этого, то естьnavigator.sendBeacon().

описывать

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

грамматика

navigator.sendBeacon(url, data);

параметр

  • urlпоказыватьdataСетевой адрес для отправки.
  • dataпараметры должны быть отправленыArrayBufferViewилиBlob,DOMStringилиFormDataтип данных.

возвращаемое значение

Когда пользовательский агент успешно ставит данные в очередь для передачи,sendBeacon()метод вернетtrue, иначе возвратfalse.

выполнить

Теперь, когда есть интерфейс, его легко реализовать.

код

 window.addEventListener("beforeunload", (e) => {
    const data = {name: "编程三昧"};
    window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});

Эффект

Будь то обновление страницы или закрытие страницы, серверная часть может получить запрос, отправленный внешним интерфейсом, полностью выполняя требование.

Суммировать

Браузеры становятся все более и более мощными, а поддерживаемые ими API становятся все богаче и богаче.Те функции, которые раньше было трудно реализовать, теперь могут быть легкими, и вам по-прежнему нужно уделять больше внимания техническим тенденциям.

~

~ Эта статья окончена, спасибо!

~

Получайте интересные знания, встречайте интересных друзей и формируйте интересные души!

Привет всем, я〖Программирование самадхи〗авторКороль-затворник, мой официальный аккаунт "Программирование самадхи』, пожалуйста, обратите внимание, я надеюсь, что вы можете дать мне больше советов!

Вы приходите, с ожиданиями, у меня есть аромат чернил, чтобы приветствовать вас! Вы возвращаетесь, что бы вы ни приобрели или ни потеряли, вы можете отдать это только с осадком!

Подчеркиваются как знания, так и навыки, культивируются внутренние и внешние навыки, должны быть усвоены как теория, так и практика, и обе руки должны быть твердыми!

Категории