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

[kirilljs]

Как перезагружать страницу с помощью 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 — защита от потери данных.