Перезагрузить страницу js

kirilljsx

Как перезагружать страницу с помощью JavaScript. Это пригодится для обновления контента, сброса формы или перезапуска приложения. Поехали!

1. Базовый метод: `location.reload()`

Самый простой способ — вызвать метод reload() объекта location:

// Перезагружает страницу с кеша  
location.reload();  

// Перезагружает страницу, игнорируя кеш (как Ctrl+F5)  
location.reload(true);  // Устаревший параметр, но работает в старых браузерах

Где использовать:

Кнопка «Обновить данные».
После отправки формы для сброса состояния.

2. Перезагрузка через `location.href`

Можно перезаписать текущий URL, что также вызовет обновление:

// Перезагружает страницу, как при переходе по ссылке  
location.href = location.href;

Плюсы: Работает даже если reload() заблокирован расширениями.

3. Автоматическая перезагрузка через setInterval

Чтобы страница обновлялась каждые N секунд:

// Обновление каждые 5 секунд  
setInterval(() => {  
    location.reload();  
}, 5000);

Важно: Добавьте уведомление для пользователя, чтобы он не потерял введенные данные.

4. Перезагрузка при изменении хэша (#)

Если нужно обновить страницу при смене якоря:

window.addEventListener('hashchange', () => {  
    location.reload();  
});

Пример: Перезагрузка при переходе с site.com#step1 на site.com#step2.

5. Принудительная перезагрузка с очисткой кеша

Чтобы избежать кеширования (например, после обновления стилей):

// Для современных браузеров  
location.reload(true);  

// Альтернатива через timestamp  
location.href = location.origin + location.pathname + '?v=' + Date.now();

Как предотвратить случайную перезагрузку

Если пользователь пытается закрыть/перезагрузить страницу с несохраненными данными:

window.addEventListener('beforeunload', (e) => {  
    if (isDataChanged) {  
        e.preventDefault();  
        e.returnValue = 'У вас есть несохраненные изменения. Выйти?';  
    }  
});

location.reload() — универсальное решение.
location.href — для обхода блокировок.
beforeunload — защита от потери данных.