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

2022-10-22 0 ∞

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

Перенаправление с помощью JavaScript
Быстрое перенаправление после загрузки страницы
Перенаправление при загрузке страницы
Перенаправление по истечении некоторого времени

Перенаправление с помощью JavaScript

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

// перенаправление на новую страницу
window.location.href = 'http://www.example.com/';
// то же, что и window.location.href = ...
window.location = 'http://www.example.com/';
window.location.assign('http://www.example.com/');
// перенаправление на другую страницу
// с заменой первоначального документа в истории браузера на новый
window.location.replace('http://www.example.com/');

В большинстве случаев функция replace() является лучшим способом. Так как она не создаст циклического перенаправления в том случае, если пользователь нажмёт в своем браузере кнопку "Назад".

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

Запасной вариант на случай если JavaScript отключен:

Лучше всего использовать заголовки HTTP на стороне сервера, чтобы осуществлять перенаправление с соответствующим кодом. Но поскольку мы говорим исключительно о JavaScript-перенаправлениях, то можно использовать метатэг refresh (в секции <head></head>), чтобы приказать браузеру перезагрузить текущую страницу через указанное время. Рассмотрим следующий пример:

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

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

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

<p>
<a href="http://example.com/">Redirect</a>
</p>

Чтобы убедиться, что код выполняется только, когда JavaScript отключен, можно обернуть метатэг в тэги noscript:

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

Побочные эффекты:

Если страница выполняет перенаправление слишком быстро (то есть меньше, чем за 2-3 секунды), она может изменять поведение кнопки «Назад» в браузере. При этом каждый раз, когда вы будете перемещаться назад на исходную страницу, перенаправление осуществляется мгновенно. Это плохо в плане юзабилити, потому что может "запереть" пользователя на странице, на которую он был перенаправлен.
Это может быть расценено как признак дорвейной страницы.
Ошибка или плохо спланированные JS location redirect могут создать бесконечную последовательность перенаправлений, перебрасывая пользователя туда-сюда между несколькими страницами.

Влияние JavaScript-перенаправлений на SEO:

Почему JavaScript-перенаправление может отрицательно сказаться на позиции сайта в поисковых системах:

Большинство поисковых роботов не могут JavaScript-код, что может отрицательно повлиять на рейтинг страниц в выдаче. Использование тэга meta refresh не решит эту проблему для всех поисковых роботов.

HTML-страница, содержащая метатег refresh, возвращает код ответа HTTP 200 OK, что отличается от кодов ответа перенаправления - 301, 302 и т.п. Как код ответа HTTP 200 OK с тэгом refresh интерпретируется браузером/ботом/роботом, зависит только от его задач и программного кода.

Альтернативы JavaScript-перенаправлению, не влияющие на SEO:

Лучшим способом исправить эту проблему является:

Добавление тэга link rel=canonical в секцию <head></head> веб-страницы, чтобы сообщить поисковым системам о дублировании страницы, например, <link rel="canonical" href="http://www.example.com/" />. Этот вариант проще реализовать, так как он не подразумевает каких-либо изменений на стороне сервера. Но не все поисковые системы и роботы могут принимать во внимание этот тэг.
Возвращение любого из следующих заголовков HTTP со стороны веб-сервера (или серверного скрипта):
- Заголовок перенаправления HTTP с наиболее верным кодом ответа перенаправления, например, 301, 302, и т.п.;
- Заголовок «404 не найдено» для веб-страниц, от которых вы хотите окончательно избавиться.

Несмотря на то, что ответ 404 считается плохим с точки зрения SEO, он может иметь смысл в некоторых ситуациях. Чтобы определиться, какое действие для JS redirect to another page подходит для вас, задайте себе следующие вопросы:

Существуют ли важные ссылки на страницу из внешних источников?
Получает ли страница существенное количество трафика?
Является ли этот URL-адрес популярным, на который пытаются попасть пользователи?

Если ответ на любой из этих вопросов да, то можно подумать об использовании перенаправления 3xx вместо ответа 404. Иначе может выскочить 404.

Причины этого следующие:

мы сэкономим трафик запросов к серверу, исключив запросы поисковых систем, пытающихся добраться до удалённых или не нужных страниц;
мы сможем корректно сообщить пользователю об ошибке, предоставив ему варианты поиска или другие связанные ссылки, что может улучшить пользовательский опыт.

Быстрое перенаправление после загрузки страницы

Разместив код перенаправления в разделе <head></head>, можно выполнить немедленное перенаправление. Например:

window.location.href = "http://www.example.com";

В качестве альтернативы можно использовать событие onload тэга body:

<body onload="window.location = 'http://example.com/'">
<!-- Ваш контент здесь -->
</body>

Но всё, что предшествует тэгу body, будет выполнено браузером перед редиректом.

Перенаправление при загрузке страницы

Допустим, что перед выполнением JS redirect вы хотите убедиться, что страница закончила загрузку и выполнились определённые скрипты. В зависимости от того, когда нужно осуществить перенаправление, можно использовать следующие три события:

Событие window.onload: возникает, когда объектная модель документа загружена, и весь контент загружен (то есть всё загружено).
Событие document.onload: возникает, когда готова объектная модель документа (строится из кода разметки). То есть перед тем, как загружаются изображения или другой внешний контент.
Событие document.onreadystatechange: возникает, когда:
- документ всё ещё загружается;
- документ загружен, но внешние ресурсы (изображения, стили, фреймы и т.п.) ещё нет;
- документ и все внешние ресурсы загружены (то же самое, что и событие window.onload).

Примеры:

// Пример №1
window.addEventListener('load', function(event) {
// все ресурсы загружены
window.location = 'http://www.example.com/';
});

// Пример №2
document.onreadystatechange = function () {
switch(document.readyState) {
case 'loading':
// документ всё ещё загружается
break;
case 'interactive':
// документ загружен; теперь возможно обращение к элементам DOM
break;
case 'complete':
// страница полностью загружена (то есть все ресурсы загружены)
break;
}
}

Перенаправление по истечении некоторого времени

Чтобы отсрочить JS redirect page на несколько секунд, можно использовать JavaScript-функцию setTimeout следующим образом:

// перенаправление через 3 секунды (или 3000 мс)
setTimeout(function() {
window.location.href = "http://www.example.com";
}, 3000);

Время в функции setTimeout определяется в миллисекундах (то есть 1000 мс = 1 секунда).
Так как отображение веб-страницы браузером происходит последовательно сверху вниз, тэги script (которые не отмечены атрибутами defer или async) загружаются и выполняются до того, как отображается страница. Поэтому размещение кода в блоке <head></head> должно привести к немедленному выполнению кода и JS location redirect после указанного количества миллисекунд. Но можно разместить код в конце веб-страницы. Код будет выполнен, когда браузер достигнет этого места в веб-документе.

Если у вас есть дополнения или замечания, оставьте их в комментариях ниже!