Как сделать редирект на другую веб-страницу в JavaScript?

Как работает редирект в JavaScript: полное руководство

Редирект — это перенаправление пользователя с текущей страницы на другой URL. В JavaScript это делается через объект window.location. Давайте разберём все способы по порядку.

1. Основные методы редиректа

window.location.href (самый популярный способ)

// Простой редирект
window.location.href = "https://example.com";

// Можно использовать относительный путь
window.location.href = "/dashboard";
window.location.href = "../page.html";

Эмуляция браузера: пользователь переходит по ссылке. Работает как клик по <a href>. Сохраняется история браузера — можно нажать «Назад».

window.location.replace (без сохранения истории)

// Заменяет текущую страницу в истории
window.location.replace("https://example.com");

Отличие: пользователь не может вернуться на исходную страницу через кнопку «Назад». Идеально для страниц-однодневок (например, после выхода из аккаунта или после успешной оплаты, чтобы не дать повторно отправить форму).

window.location.assign (аналог href)

window.location.assign("https://example.com");

Работает так же, как href, но это метод, а не свойство. Некоторые разработчики предпочитают его для читаемости.

2. Редирект с задержкой

Используем setTimeout:

function redirectWithDelay() {
  // Показываем сообщение пользователю
  document.getElementById("message").textContent = "Вы будете перенаправлены через 5 секунд...";
  
  setTimeout(() => {
    window.location.href = "https://example.com";
  }, 5000); // 5000 мс = 5 секунд
}

Можно добавить обратный отсчёт:

let seconds = 5;
const countdown = setInterval(() => {
  seconds--;
  document.getElementById("timer").textContent = seconds;
  if (seconds <= 0) {
    clearInterval(countdown);
    window.location.href = "https://example.com";
  }
}, 1000);

3. Редирект после действия пользователя

<button onclick="redirectAfterClick()">Перейти на сайт</button>

<script>
function redirectAfterClick() {
  window.location.href = "https://example.com";
}
</script>

Или после отправки формы (чтобы избежать повторной отправки, используем replace):

document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // Останавливаем стандартную отправку
  
  // Отправляем данные через fetch
  fetch("/api/submit", { method: "POST", body: new FormData(this) })
    .then(response => {
      if (response.ok) {
        window.location.replace("/success"); // Редирект без возврата
      }
    });
});

4. Редирект без перезагрузки страницы (SPA-подход)

Если вы используете современный фреймворк (React, Vue, Angular) или просто хотите имитировать редирект без полной перезагрузки, можно менять содержимое страницы через JavaScript и обновлять URL через History API:

// Меняем URL без перезагрузки
history.pushState({ page: "about" }, "О нас", "/about");

// Обновляем содержимое
document.getElementById("content").innerHTML = "<h1>О нас</h1><p>Текст страницы...</p>";

Но это уже не редирект в классическом смысле, а имитация. Для реального перенаправления на другой домен или сервер — только window.location.

5. Проверка, был ли уже редирект (защита от дублей)

if (!sessionStorage.getItem("redirected")) {
  sessionStorage.setItem("redirected", "true");
  window.location.href = "/welcome";
}

6. Ошибки новичков и их решение

• Проблема: window.location = url срабатывает не всегда. Решение: используйте window.location.href — это явное указание свойства.
• Проблема: Редирект не работает до загрузки DOM. Решение: оборачивайте код в DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function() {
  // Здесь редирект безопасен
  window.location.href = "/new-page";
});

• Проблема: Бесконечный цикл редиректов. Решение: проверяйте текущий URL перед редиректом:

if (window.location.pathname !== "/target") {
  window.location.href = "/target";
}

Итог: какой способ выбрать?

• Обычный редирект (с возможностью вернуться): window.location.href = url;
• Редирект без возврата (после формы, оплаты): window.location.replace(url);
• Редирект с задержкой: setTimeout + href
• Имитация редиректа (SPA): history.pushState

Запомните: window.location.href — ваш основной инструмент. Он прост, надёжен и работает во всех браузерах.

// Тот же window.location, но в jQuery-стиле
$(window).attr('location', 'https://example.com');

// Или короче:
window.location = 'https://example.com'; // jQuery не нужен

<meta http-equiv="refresh" content="5; url=https://example.com">

// Node.js (Express)
res.redirect('/new-page');

// PHP
header('Location: /new-page');
exit;