Редирект - это автоматическое перенаправление пользователя с одного адреса на другой. То есть человек заходит на один сайт, а оказывается совсем на другом (либо на другой странице одного сайта). Я, думаю, что такое Вы видели достаточно часто. Иногда редирект делают с задержкой . В общем, тема очень важная, и её я рассмотрю в этой статье.

Вообще говоря, речь пойдёт сейчас об объекте Location , который является свойством объекта Document . У объекта Location есть свойство href , с помощью которого и реализуется редирект на JavaScript . Данное свойство доступно и для чтения, и для записи. Для начала давайте его прочитаем:

Document.write(document.location.href);

В результате Вы увидите полный адрес к Вашему скрипту.

Теперь сделаем простейший редирект на JavaScript :

Document.location.href = "http://сайт";

Таким образом, все пользователи, которые запустят этот скрипт будут автоматически переходить на сайт: "http://сайт ".

Теперь давайте сделаем классическую задачу, которые реализуют очень часто. Допустим, у Вас был сайт: http://a.ru . Затем Вы купили новый домен для Вашего сайта и его адрес стал: http://b.ru . И хотите, чтобы все посетители переходили с http://a.ru на новый http://b.ru . Причём, Вы хотите, чтобы они знали, что у Вашего сайта новый адрес. Знакома ситуация? Так вот, реализуется это с помощью редиректа с задержкой:


var delay = 5000;
setTimeout("document.location.href="http://b.ru"", delay);

У нашего сайта новый адрес: http://b.ru. Через 5 секунд Вы будете перенаправлены на него. Если этого не происходит, то перейдите самостоятельно: http://b.ru

Сначала пользователь увидит сообщение, а через 5 секунд он уже перейдёт по новому адресу. Если вдруг у пользователя отключён JavaScript , то тогда он может перейти самостоятельно, просто щёлкнув по ссылке.

28.08.16 8.5K

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

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

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

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

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

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

window.location.href = "URL2";

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

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

Перенаправление на другую страницу через 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"; };

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

Go to Homepage

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

Что такое редирект простыми словами

Редирект (англ. "Redirect") - это автоматическое перенаправление пользователей с одной страницы сайта на другую страницу (причем как в пределах одного сайта, так и на внешние сайты). Для поисковых систем редирект применяется для склейки адресов страниц.

У каждого редиректа есть свой номер, который отвечает за его функцию. Существуют следующие виды редиректов:

  • 300 редирект - множественный выбор;
  • - перемещен навсегда;
  • 302 редирект - документ найден;
  • 303 редирект - смотри другое;
  • 304 редирект - документ не изменился;
  • 305 редирект - используй прокси;
  • 306 редирект - не используется;
  • 307 редирект - временный редирект;

Лидером использования среди этих редиректов является . Он используется, когда адрес страницы сайта изменился навсегда. Как показывает практика - это наиболее часто встречающаяся ситуация. Во всех примерах ниже, как раз будет именно он.

Существует несколько способов сделать редирект. У каждого есть свои плюсы и минусы. Ниже мы рассмотрим каждый из них в отдельности с примерами.

1. Редирект через JavaScript

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

document.location ="http://ya.ru/ "; //первый вариант window.location.replace ("http://ya.ru/ "); //второй вариант window.location.reload ("http://ya.ru/ "); //третий вариант document.location.replace ("http://ya.ru/ ");//четвертый вариант location ="http://ya.ru/ ";//пятый вариант setTimeout ("location ="http://ya.ru/ ";", 10000 );//шестой вариант //с заданием интервала (1=1мс)

В любом из выше перечисленных вариантов будет автоматический переход на сайт http://ya.ru/

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

2. Редирект через.htaccess

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

В общем виде редирект через файл.htaccess выглядит так:

Redirect [КОД_РЕДИРЕКТА] /АДРЕС_ОТКУДА АДРЕС_КУДА
  • КОД_РЕДИРЕКТА - здесь указывается номер редиректа (можно не указывать, по умолчанию стоит 301);
  • /АДРЕС_ОТКУДА - страница, с которой будет осуществлен переход. Обязательно должна начинаться со слэша "/";
  • АДРЕС_КУДА - указываем полный адрес (URL) куда будет осуществлена переадресация;
Примеры редиректа через.htaccess 1) Редирект с www и без www

301 редирект с сайта без www на страницу сайта с www.

RewriteEngine On RewriteCond %{HTTP_HOST} ^site.ru RewriteRule (.*) http://www.site.ru/$1

В данном случае будет автоматически переход с любой страница site.ru на www.site.ru соотвественно. Например

site.ru/razdel/123.html -> www.site.ru/razdel/123.html site.ru/razdel -> www.site.ru/razdel

Для обратного редиректа с www на без www (www.site.ru -> site.ru) необходимо прописать следующий код:

RewriteEngine On RewriteCond %{HTTP_HOST} ^www.site.ru RewriteRule (.*) http://site.ru/$1 2) Переадресация пользователя на другой домен Redirect Permanent / http://site.ru

Все пользователи будут автоматически перенаправляться на домен http://site.ru/

3) Переадресация пользователя со страницы на другой адрес Redirect 301 /start.html http://site.ru/hi.html

Со страницы /start.html будет выполнен автоматический переход на http://site.ru/hi.html

4) Редирект при смене домена сайта (URL)

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

RewriteCond %{HTTP_HOST} ^olddomen\.ru RewriteRule ^(.*)$ http://newdomen.ru/$1 RewriteCond %{HTTP_HOST} ^www\.olddomen\.ru RewriteRule ^(.*)$ http://newdomen.ru/$1 5) Редирект с http://site/yyyy/mm/dd/post/ на http://site/post/

Такой редирект будет полезен для владельцев блогов на WordPress. Указание года, месяца и числа публикации новости вовсе необязательно и создает лишнюю иерархию, которая мешает продвижению блога. Поэтому нужно использовать следующий код:

RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RedirectMatch 301 /{4}/{2}/{2}/(.+)/$ /$1/

Например, с адреса http://site/2014/11/24/primerposta/ будет 301 редирект на http://site/primerposta/ .

3. Редирект html через мета тег

Редирект html делается через мета тег с помощью атрибут refresh :

...

В данном случае будет выполнен редирект (автоматический переход) на http://site.ru/ через 1 секунду. В content первым параметром является секунды, а вторым URL. Если секунды не указаны, то это означает 0 (мгновенный переход).

4. Редирект php

В PHP есть специальная функция header отвечающая за различные варианты переадресации.

Примеры

header("Location: http://site.ru/", true, 301);// переадресация //с помощью 301 редиректа на site.ru; header("Location: http://site2.ru/");// переадресация с помощью 301 //редиректа на site2.ru; header("Refresh: 5; url=http://site.ru/");// переадресовать с //задержкой на 5 секунд

Какой способ редиректа выбрать?
На мой взгляд самым лучшим является , поскольку все описывается в одном файле и происходит уже не уровне обработки веб-сервера, то есть не требуется загрузки страницы. Это в свою очередь может довольно сильно ускорить процесс загрузки. Во всех других случаях необходимо наличие лишней страницы и небольшой временной задержки из-за того, что страница должна загрузиться хотя бы частично.

Проверить правильность настройки редиректа можно через сервис

Редирект (от англ. redirect – переориентировать) – это переадресация страницы сайта на какую-то другую страницу или другой сайт. Редирект можно сделать различными способами, основные из которых и будут здесь рассмотрены., а именно redirect на php , javascript , редирект при помощи html и при помощи файла htaccess .

Среди перечисленных способов, наиболее актуальными являются php redirect и редирект при помощи.htaccess . Дело в том, что именно эти способы позволяют не только переадресовать страницу, но и вернуть специальную 301 ошибку (301 Permament Redirect). Для чего же это нужно? А нужно это для поисковых систем.

Допустим у нас был раскрученный сайт с большим числом посетителей. Затем сайт был перемещён на новый домен. Поисковая система его ещё не знает. 301 редирект позволяет как бы “склеить” старый и новый адрес, сохранив при этом все те элементы оптимизации, которые были сделаны для этого сайта, тем самым сохранив посещаемость и аудиторию самого сайта.

А теперь рассмотрим все перечисленные варианты редиректов, и начнём с редиректа на php.

PHP redirect (301)

Редирект на php, как и на других языках программирования, основан на спецификации протокола HTTP, а именно отправки необходимых заголовков. Как это работает? Довольно просто. Каждый раз, когда мы обращаемся к какой-то странице интернета, мы получаем HTTP ответ от сервера, который содержит заголовки (header) и тело (body). В теле ответа

Редирект HTML

В языке разметки HTML есть специальный мета-тег, предназначенный для переадресации.

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

Редирект JavaScript

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


function reload() {location = "http://site.com"}; setTimeout("reload()", 0);

В данном коде создаётся функция с переадресацией на нужную страницу, а затем вызывается в функции setTimeout, что позволяет произвести переадресацию спустя необходимое время.

Редирект htaccess (301)

Файл.htaccess – это служебный файл с различными дополнительными настройками сервера Apache. Размещается он вручную, в нашем случае, в корне сайта. С его помощью можно устраивать 301 редиректы, однако для этого в Апаче должны быть включены необходимые модули.

Использование директив модуля mod_alias

В данном модуле существуют три директивы: Redirect, RedirectPermanent и RedirectMatch. Первые две вроде как идентичны по своим свойства, третья идёт особняком. Для первых двух пример:

Redirect 301 / http://site.com
Redirect permanent /index.html http://site.com
RedirectPermanent /index.html http://site.com/default.html

Строчки схожи. Но вроде как существует один минус – чтобы перенаправить все страницы, нужно их все и будет указать в списке. Чтобы как-то облегчить задачу, существует та другая директива:

RedirectMatch /(.*)\.html$ /$1.php

Можно задавать регулярные выражения для переадресации со старого урла на новый.

Использование директив модуля mod_rewrite

Чтобы не было двоякочтения одних и тех же страниц у поисковиков, иногда нужно переправить все адреса с домена без www на домен с www. Например,

#включаем модуль и необходимую доп.опцию
RewriteEngine On
Options +FollowSymLinks
#две строки для переадресации от "без ввв" к "с ввв"
RewriteCond %{HTTP_HOST} ^site.com
RewriteRule (.*) http://www.site.com/$1

Вместо заключения

Если вас всё ещё мучает вопрос, на чём же остановить свой выбор (конечно мучает, тисками и ножницами – прим.ред. ), то пора перестать мучиться (да что вы говорите! – прим.ред. ). Останавливаем взор на редиректе php (или другого языка программирования, которые здесь не были рассмотрены, например Perl) и редиректе при помощи файла.htaccess, поскольку именно они позволяют перенести сайт без всяких потерь для оптимизации в поисковых системах. Если оно не важно, то тогда подойдёт любой метод. И собственно на этой заключительной ноте (соль? ля? си? – прим.ред. ) я и заканчиваю этот пост.

Четыре варианта редиректа (перенаправления) пользователей, наглядно и с примерами.

1. Редирект через Java Script - будет работать только если у пользователя включена поддержка JS на устройстве. Не парьтесь, процент пользователей без JS ничтожно мал. Если желаете проверить, насколько это не комфортно - просто отключите у себя в браузере JS на один день.

Код работающего редиректа:

2. Html редирект

Данный пример перенаправляет пользователя по нужному адресу с задержкой в 1 секунду.

Помню, в IE он отрабатывал не корректно, вернее совсем не отрабатывал. Если будете использовать - проверьте, на всякий случай.

3. Редирект на php

Просто и со вкусом, файл с расширением.php с таким содержанием:

4. Редирект через.htaccess

Redirect / http://url4trafic.ru

При перенаправлении трафика из социальных сетей в общих случаях наиболее актуален вариант из примера №1, с небольшим дополнением - а именно - с использованием ogp разметки. Чтоб было немного понятней - разметка Open Graph это протокол разметки контента страницы для отправки её содержимого в социальные сети. При публикации ссылки в социальную сеть вы можете «вручную» указать какие картинку-миниатюру и описание отображать.

Работающий пример (возможны неточности и недочёты, но оно таки работает:)

Заголовок страницы

Как это выглядит при публикации вКонакте:

Краткий разбор моментов:
- указывает что будет использоваться разметка Open Graph
- - заполняем заманчивое описание - в примере выше это «Джон Сина назвал дату своего возвращения»
- Заголовок страницы - интригующий заголовок - в примере выше это «Джон Сина возвращается к выступлениям - Новости реслинга WWE»
- - это путь к изображению, которое будет загружаться - в примере выше этот тот самые мужик в синей майке.
Чтобы ссылка получилась красивой и большой - изображение изначально должно быть достаточных размеров. Для вКонтакте например, это больше 537x240 пикселей. Лучше - больше.

Location="http://url4trafic.ru" - это как вы уже догадались url, куда мы будем отправлять пользователя.