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

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

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

Тот, который можно считать каноническим для перехода к новому URL-адресу,

window.location = 'https://newurl.com'

Если вы хотите перенаправить на другой путь в том же домене, используйте:

window.location.pathname = '/new'

Это используетlocationобъект, предложенныйAPI истории.

Другие варианты перенаправления

Как и в большинстве случаев в программировании, есть много способов выполнить одну и ту же операцию.

Сwindowнеявно присутствует в браузере, вы также можете:

location = 'https://newurl.com'

Другой способ - установитьhrefсобственностьюlocation:

window.location.href = 'https://newurl.com'

locationтакже имеетassign(), который принимает URL-адрес и выполняет то же самое:

window.location.assign('https://newurl.com')

Вreplace()Метод отличается от предыдущих способов, потому что он перезаписывает текущую страницу в истории. Текущая страница стирается, поэтому, когда вы нажимаете кнопку «назад», вы возвращаетесь на страницу, котораясейчас жепоследний посещенный.

window.location.replace('https://newurl.com')

Это может быть удобно в некоторых ситуациях.

Различные способы достиженияwindowобъект

Браузер предоставляетselfиtopобъекты, которые все ссылаются наwindowобъект, поэтому вы можете использовать их вместоwindowво всех приведенных выше примерах:

self.location = 'https://newurl.com'

top.location = https://newurl.com

301 редирект с использованием серверной директивы

Все приведенные выше примеры рассматривают случай программного решения перейти на другую страницу.

Если вам нужно перенаправить, потому что текущий URL-адрес старый, и переместить новый URL-адрес, лучше всего использовать директиву на уровне сервера и установить код HTTP 301, чтобы сигнализировать поисковым системам, что текущий URL-адрес навсегда перемещен на новый ресурс.

Это можно сделать через.htaccessпри использовании Apache.Netlifyделает это через_redirectsфайл.

Возможны ли 301 редирект с использованием JavaScript?

К сожалению нет.

На стороне клиента это сделать невозможно.

Код ответа HTTP 301 должен быть отправлен с сервера задолго до того, как браузер выполнит JavaScript.

Эксперименты говорят, что переадресация JavaScript интерпретируется поисковыми системами как переадресация 301. Видетьэто сообщение Search Engine Landдля справки.

Google говорит:

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

Используйте метатег HTML

Другой вариант - использовать метатег в вашем HTML:

<html>
  <head>
    <meta http-equiv="refresh" content="0;URL=https://newurl.com/">
  </head>
</html>

Это заставит браузер загружать новую страницу после того, как он загрузил и интерпретировал текущую, и не будет ничего сигнализировать поисковым системам. Лучший вариант - всегда использовать перенаправление на уровне сервера 301.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: