Перенаправление на другую страницу с помощью JavaScript

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

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

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

Давайте рассмотрим, как можно легко использовать 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 редиректа на другую страницу. Если я когда-либо столкнусь с иными сценариями, я добавлю их в эту статью.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *