Перенаправление на другую страницу с помощью JavaScript. Все виды редиректов (html, js, php, htaccess) Javascript редирект на ту же страницу

Типы редиректов

Есть несколько типов редиректов, рассмотрите каждый из них в кратце, чтобы определить какой из них вам больше подходит.

Редирект через htaccess - самый популярный, и довольно простой способ. Чтобы его сделать, вам понадобится создать в папке сайта файл с названием.htaccess (обратите внимание, что название файла начинается с точки, это не опечатка). Если вы используете CMS WordPress или Joomla, то скорее всего этот файл у вас уже есть, в этом случае вам нужно будет просто отредактировать его.
Читайте ниже чтобы узнать какие именно инструкции в нем нужно прописать, чтобы создать перенаправление.

Редирект при помощи PHP - подойдет в том случае, если вы разбираетесь в PHP и знаете структуру своего сайта. Этот вариант подойдет вам, если ваш сайт написан не на CMS. В ином случае лучше используйте редирект через htaccess.

Редирект HTML - если у вас простой HTML сайт и вам нужно сделать перенаправление для одной страницы - это самый простой вариант. Сделать перенаправление для всего сайта этим способом будет трудозатратно, особенно если у вас на сайте больше 10 страниц.

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

Редирект при помощи.htaccess файла

Инструкции, которые вы увидите ниже, нужно прописать в файл.htaccess в самое начало.

Редирект всего сайта (всех страниц) на другой сайт

Redirect / http://new-site.ru/

В этом примере, перенаправление будет происходить на сайт new-site.ru

Редирект одной страницы на другую

Redirect /page-1.html /page-2.html

В этом примере, перенаправление будет происходить со страницы page-1.html на страницу page-2.html. Обе страницы должны располагаться на одном домене.
Этот вариант подходит для замены старых страниц сайта на новые.

310 редирект с www на без www

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.example\.ru
RewriteRule ^(.*)$ http://example.ru/$1

В этом примере, посетители будут перенаправляться с http://www.example.ru на http://example.ru.

310 редирект с одной страницы на другую

Redirect 301 /blog/page-1.html http://example.com/page-2.htm

В этом примере, посетители будут перенаправляться со страницы blog/page-1.html на example.com/page-2.htm .

Редирект ошибки 404

ErrorDocument 404 /index.html

Пропишите эту строку в.htaccess файле, и тогда все посетители, которым встретится ошибка 404, будут перенаправлены на index.html .

Редирект с HTTP на HTTPS

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

Пропишите эту строку в.htaccess файле, и тогда все посетители вошедшие на сайт по протоколу HTTP будут перенаправляться на защищенный протокол HTTPS.

Если вы прописываете редирект для WordPress , то обратите внимание на то, что в файле уже есть строка RewriteEngine On. Поэтому сразу под ней вам нужно добавить такие строки

RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.domain.com/$1

PHP редирект

В PHP редирект делается так: сервер отправляет заголовки headers браузеру посетителя, и тот переходит по нужному адресу автоматически.
Стоит отметить важный момент, отправлять заголовки можно только до вывода другой информации. То есть они должны отправляться до вывода любой другой информации через echo и до отправки кук.

Редирект на другой сайт

В этом примере, перенаправление будет происходить на сайт http://example.com

Здесь перенаправление будет происходить на http://example.com/page.html

Редирект определенной страницы на страницу другого сайта

Здесь если посетитель сайта зайдет на страницу blog/post-1.html то он будет перенаправлен на http://example.com/page.html

HTML редирект

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

Редирект на другой сайт

В этом примере, перенаправление будет происходить на сайт https://сайт с задержкой в 5 секунд. Если установить значение задержки вместо 5 в 0, то посетитель будет перенаправляться на другой сайт моментально.

Редирект на страницу другого сайта

В ы, возможно, сталкивались с ситуацией, когда вы нажали на URL – адрес, чтобы достичь страницы X, но внутренне вы были направлены на другую страницу Y. Это происходит из-за перенаправления страниц . Эта концепция отличается от обновления страницы в JavaScript.

Могут быть различные причины, почему вы хотели бы перенаправить пользователя с исходной страницы. Мы перечисляем внизу несколько причин:

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

Как работает переадресация страницы?

Пример реализации перенаправления страницы следующий:

Пример 1

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

Нажмите следующую кнопку, Вы будете перенаправлены на главную страницу.

Пример 2

Вы можете показать соответствующее сообщение для ваших посетителей сайта, а затем перенаправить их на новую страницу. Для этого потребуется задержка времени, чтобы загрузить новую страницу. В следующем примере показано, как реализовать то же самое. Здесь SetTimeout () является встроенной функцией JavaScript, которая может быть использована для выполнения другой функции по истечению заданного интервала времени.

Вывод Вы будете перенаправлены на главную страницу через 10 сек.! Пример 3

В следующем примере показано, как перенаправить посетителей вашего сайта на другую страницу в зависимости от их браузеров.

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

Вообще говоря, речь пойдёт сейчас об объекте 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 , то тогда он может перейти самостоятельно, просто щёлкнув по ссылке.

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

Редирект (англ. "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 секунд

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

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

Примеры редиректов или же перенаправлений на другую страницу.

Редирект в HTML // Обновить страницу через 5 секунд: // Перенаправить на https://www.google.com через 5 секунд: // Перенаправьте на https://www.google.com немедленно: Редирект в JavaScript

Метод replace() позволяет заменить одну страницу другой таким образом, что это замещение не будет отражено в истории просмотра HTML-страниц (history) браузера

Location.replace("https://www.google.com"); document.location.replace("https://www.google.com");

Метод reload() полностью моделирует поведение браузера при нажатии на кнопку reload в панели инструментов. Если вызывать метод без аргумента или указать его равным true , то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера. Такое поведение соответствует нажатию на кнопку reload . Если в качестве аргумента указать false , то браузер перезагрузит текущий документ с сервера. Такое поведение соответствует одновременному нажатию на reload и кнопки клавиатуры shift (reload+shift) .

Window.location.reload("https://www.google.com");

Следующие примеры тоже перенаправят на google:

Location="https://www.google.com"; document.location.href="https://www.google.com";

С помощью функции setTimeout возможно реализовать задержку переадресации перед выполнением редиректа (в примере - 5 секунд):

SetTimeout("location="https://www.google.com";", 5000);

Простой пример редиректа с таймером:

var sec=10; function Sec() { document.getElementById("sec").innerHTML=sec; sec--; if(sec==1) { location.replace("https://www.google.com") } setTimeout("Sec()",1000); } Sec();

Подождите пожалуйста 10 сек или перейдите по этой ссылке: https://www.google.com

Редирект в PHP

В php есть функция header() , которая разрешает не только подменять стандартные заголовки, но и добавлять новые.

Синтаксис:

// string - полностью сформированная строка заголовка, который необходимо добавить (без завершающего перевода строки "\n") // replace указывает, нужно ли заменять заголовки с одинаковыми именами (true), или же добавлять в конец (false) // http_response_code указывает код http-ответа (300, 301, 302 и т.д.) void header (string string [, bool replace = true [, int http_response_code]]);

Примеры использования:

Header("Refresh: 0; url=/error404.html"); // переадресовать на страницу ошибки немедленно (без задержки) header("Refresh: 5; url=https://www.google.com/"); // переадресовать на главную страницу Рамблера через 5 секунд после загрузки страницы. header("Location: /", true, 307); // перебросить на главную страницу сайта с использованием 307 редиректа. header("Location: /article/page.htm", true, 303); // с помощью 303 редиректа переадресовать на внутреннюю страницу сайта. header("Location: http://google.ru/search?q=redirect"); // с помощью 302 редиректа переадресовывать на поиск в гугле слова redirect (При использовании Location без указания кода редиректа, по умолчанию используется 302-й). header("Location: http://yandex.ru/yandsearch?text=redirect", true, 301); // сделать переадресацию с помощью 301 редиректа на поиск в Яндексе слова redirect.

Редирект HTML в PHP: