0 ∞ 4

Как в JS реализуется переход на другую страницу

В этой статье я расскажу, как в JS реализуется переход на другую страницу. А также приведу несколько простых примеров JavaScript редиректа.

Вы можете перенаправлять пользователя с одной веб-страницы на любую другую несколькими способами. В том числе с помощью обновления мета-данных HTML, перенаправления на стороне сервера. Например, используя файл .htaccess, PHP, и с помощью перенаправления на стороне клиента через JavaScript.

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

Давайте рассмотрим, как можно использовать JavaScript для перенаправления пользователя на другую страницу.

Обновлено: 2024-10-11 17:46:06 Вадим Дворниковавтор материала

Автоматическое JavaScript-перенаправление на другую страницу

Автоматическое JavaScript-перенаправление на другую страницу

Если нужно автоматически перенаправить пользователя с одной страницы (URL1 ) на другую страницу (URL2 ), можно использовать следующий код:

window.location.href = 'URL2';

Необходимо вставить приведенный выше код на первую страницу (URL1 ). Замените URL2 на нужный адрес страницы. Лучше поместить этот код внутри элемента <head> (а не в нижней части страницы), чтобы страница перенаправлялась до того, как браузер начинает ее отображать.

СОВЕТ: Если вы используете встроенный JavaScript (т.е. без внешнего файла .js), не забудьте поместить код JavaScript в теги <script></script>.

Перенаправление через X секунд

В этом примере мы будем осуществлять js редирект на другую страницу через некоторое время после загрузки страницы. Например, если нужно перенаправить посетителя на главную страницу после отображения страницы приветствия в течение 5 секунд:

setTimeout(function(){
  window.location.href = 'homepage-url';
}, 5 * 1000);

Необходимо вставить приведенный код JavaScript на странице приветствия. Не забудьте заменить homepage-url на URL-адрес домашней страницы.

Мы использовали метод setTimeout, чтобы указать скрипту выполнить перенаправление через 5 секунд (умножаем 5 на 1000, чтобы преобразовать секунды в миллисекунды).

СОВЕТ: В JavaScript значения времени всегда рассчитываются в миллисекундах.

Перенаправление , исходя из условия

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

Используйте следующий код для перенаправления посетителей, которые удовлетворяют определенному условию:

if (CONDITION) {
  window.location.href = 'redirect-url';
}

Например, этот код перенаправляет посетителей на другую страницу, если ширина их экрана меньше 600 пикселов:

if (screen.width < 600) {
  window.location.href = 'redirect-url';
}

Перенаправление на основе действий пользователя

Последний пример демонстрирует, как перенаправить посетителя, основываясь на его действиях. Вы можете привязать js редирект к любому типу действия пользователя. В данном примере для простоты мы будем обрабатывать нажатие кнопки.

Следующий код будет перенаправлять посетителя на целевую страницу после нажатия на #mybutton:

document.getElementById('mybutton').onclick = function() {
  window.location.href = 'redirect-url';
};

Можно сделать то же самое, используя следующий код:

<button onclick="window.location.href = '/'">Go to Homepage</button>

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

Я попытался рассмотреть все возможные случаи js редиректа на другую страницу. Если я когда-либо столкнусь с другими сценариями, я добавлю их в эту статью.

Вадим Дворниковавтор-переводчик статьи «Redirect to Another Page with JavaScript»