Как заблокировать работу с окном браузера при перезагрузке страницы?

Нужно перезагрузить страницу браузера, но сам процесс перезагрузки занимает некоторое время.
При этом, если на странице есть элементы управления (кнопки), то пользователь может их случайно нажать, что приведет к ненужным последствиям.
Подскажите, как заблокировать работу со страницей до момента ее перезагрузки?

Саму перезагрузку делаю так:
location.reload(true);

Дополнительно:

Роман Кофф все ответы по сути правильные...
Но есть очень интересное событие - https://developer.mozilla.org/ru/docs/Web/API/Wind...
Используй его.
+++ когда оно возникнет - поверх страницы можно сделать прелоадер.
Примерhttps://detskiylogoped.ru/

Рисуйте DIV поверх всей страницы (например как это делают в просмотре картинок), все клики пользователя будут попадать в этот DIV...

P.S. Перехватывать клавиатуру уже сложнее, угу.

• Да. Про подобный вариант и думал. Действительно!
  Еще и анимашку можно будет повесить с часами.
• Роман Кофф,

  body.locked { pointer-events: none; }

  body.locked { pointer-events: none; }

• Сергей delphinpro, как вариант, но я уже сделал более изящно. Спасибо

Ответы:

Всем "опасным" кнопкам по умолчанию устанавливаем атрибут disabled. Тогда их нельзя будет нажать.

<button class="dangerous"  disabled>Сохранить</button>

И сделать обработчик события загрузки страницы, который уберет этот самый атрибут с опасных кнопок по окончании полной загрузки страницы

document.addEventListener(‘load’, function() {  	const dangers = document.querySelectorAll(".dangerous");         dangers.forEach((item) => {               item.removeAttribute('disabled'):         }); }

Если же вас беспокоят именно элементы, остающиеся на экране при старте перезагрузки, то самым простым решением было бы вообще удалить весь html страницы до перезагрузки, а потом спокойно её запустить. Либо вы можете точно так же в момент, когда вам надо запустить перезагрузку, установить всем опасным кнопкам атрибут disabled, а потом стартовать перезагрузку страницы.

Но!!! Данный подход только лишь сделает жизнь пользователей более приятной. Не забывайте, что фронтенд-фрогнтендом, но бэкенд должен всё же уметь работать с такими запросами, которые не будут содержать в себе все нужные данные.
Первое правило бэкенда - "Никогда не верь фронтенду и его данным, проверяй и валидируй всё"

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

Можно начать перехватывать вообще все события клика по html>body на начальной стадии "capture", и дальше не пропускать. Что-то типа

document.body.addEventListener('click', e => {     e.stopPropagaion();     e.stopImmediatePropagation();     e.preventDefault();   }, { capture: true });

Аналогично можно и для клавиатурных событий попробовать.

В итоге я решил так:

var elem1 = document.createElement('div'); elem1.className = 'ans-locker'; elem1.innerHTML = '<div class="ans-spinner"></div>'; document.body.appendChild(elem1); location.reload(true);

.ans-locker {     position: absolute;     display: flex;     justify-content: center;     align-items: center;     width: 100%;     height: 100%;     opacity: .5;     z-index: 1000;     background: #fff; }  .ans-spinner {     min-width: 48px;     min-height: 48px;     background-repeat: no-repeat;     background-image: url('data:image/gif;base64,#КОД СПИННЕРА***#'); }

Всем спасибо!

*** Спинер отсюда, если кому интересно:
https://gist.github.com/davebra/204beadd86b6261a83...