В этой статье мы покажем, как можно организовать перенаправление со страницы, используя JavaScript location . Неожиданные перенаправления считаются очень раздражающими с точки зрения пользователей, поскольку они отрицательно влияют на общее впечатление. Например, если вы перенаправляете пользователей на другой сайт сразу после их перехода на ваш. Также, если вы направите на постороннюю страницу по таймеру или после того, как они совершили определенное действие. Это приведет к тому, что пользователь захочет сразу же покинуть ваш сайт.
Кроме этого поисковые системы не жалуют ресурсы, использующие переадресацию, особенно если они вводят пользователей в заблуждение. Но существуют случаи, когда перенаправление может быть полезно. Поэтому мы оставляем за вами принятие решения, использовать переадресацию или нет.
Методы переадресации JavaScriptВ JavaScript window location или объект location используется, чтобы получить информацию о местоположении текущей веб-страницы (документа ), а также для его изменения. Ниже приведен список способов, которые могут быть использованы для реализации переадресации JavaScript :
//Устанавливает новое местоположение текущего окна. window.location = "http://www.example.com"; //Устанавливает новую гиперссылку (URL) для текущего окна. window.location.href = "http://www.example.com"; // Присваивает новый URL текущему окну. window.location.assign("http://www.example.com"); //Заменяет положение текущего окна на новое. window.location.replace("http://www.example.com"); //Задает местоположение самого текущего окна. self.location = "http://www.example.com"; // Задает положение самого верхнего окна относительно текущего. top.location = "http://www.example.com";
Хотя приведенные выше строки JavaScript кода выполняют схожую работу, у них есть небольшие отличия. Например, если вы используете перенаправление top.location внутри элемента iframe , то это принудительно перенаправит на главное окно. Еще один момент, о котором стоит помнить: location.replace() заменяет текущий документ, удаляя его из истории и делая его недоступным с помощью кнопки «Назад » в браузере.
window.location.href = "http://www.example.com";
Также вы можете зайти на эту страницу, чтобы подробнее узнать, как работает window.location .
Переадресация JavaScript: перенаправление при загрузкеЧтобы перенаправить пользователя на другой веб-сайт сразу же после открытия вашего сайта, можно использовать следующий код вверху вашей страницы, внутри элемента . Или, если вы используете отдельный .js файл , поместите следующий код в этот файл и не забудьте сослаться на него в заголовке вашей страницы:
window.location.href = "http://www.example.com";
Просто замените URL-адрес из примера на тот адрес, куда вы хотите перенаправлять. Следует отметить, что при этом виде переадресации, посетители вообще не увидят вашу веб-страницу и будут моментально перенаправлены на целевой адрес.
Переадресация JavaScript: перенаправление после определенного периода времениЧтобы перенаправить пользователя на другой сайт после определенного периода времени, можно использовать следующий код:
setTimeout(function() { window.location.href = "http://www.example.com"; }, 3000);
Функция JavaScript location href , приведенная выше, перенаправит пользователя со страницы через 3 секунды после полной загрузки. Вы можете изменить значение 3000 (3 x 1000 в миллисекундах ) на свое усмотрение.
Переадресация JavaScript: перенаправление со страницы после события или действия пользователяИногда нужно отправить пользователя на другую страницу после определенного события или совершенного действия. В таких случаях можно использовать проверку условия или закрепить за элементом событие для выполнения переадресации. Рассмотрим два следующих примера:
// Проверяем, верно ли условие, и затем перенаправляем. if (...) { window.location.href = "http://www.example.com"; }
Приведенный выше код JavaScript document location href выполнит перенаправление, если условие верно:
// событие onclick присвоено элементу #button. document.getElementById("button").onclick = function() { window.location.href = "http://www.example.com"; };
Приведенный выше код выполнит перенаправление, когда пользователь нажмет на элемент #button .
Что такое редирект простыми словамиРедирект (англ. "Redirect") - это автоматическое перенаправление пользователей с одной страницы сайта на другую страницу (причем как в пределах одного сайта, так и на внешние сайты). Для поисковых систем редирект применяется для склейки адресов страниц.
У каждого редиректа есть свой номер, который отвечает за его функцию. Существуют следующие виды редиректов:
Лидером использования среди этих редиректов является . Он используется, когда адрес страницы сайта изменился навсегда. Как показывает практика - это наиболее часто встречающаяся ситуация. Во всех примерах ниже, как раз будет именно он.
Существует несколько способов сделать редирект. У каждого есть свои плюсы и минусы. Ниже мы рассмотрим каждый из них в отдельности с примерами.
1. Редирект через JavaScriptJavaScript имеет широкий набор функций для осуществления редиректа. Ниже в примере представлены различные редиректы выполненные с помощью различных функций 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 редирект с сайта без 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:
Эта функция должна быть вызвана в начале веб-страницы до вывода HTML-кода . Чтобы узнать больше о настройке этого метода, ознакомьтесь с документацией PHP .
Чтобы выполнить редирект с помощью PHP через определенное время:
Редирект на example.com выполняется через 5 секунд. Вы можете изменить это значение на необходимое.
Редирект URL-адресов с помощью JavaScriptВот самый простой способ index html редиректа с помощью JavaScript :
document.location.href = "http://example.com/";
Редирект URL-адресов с помощью HTMLМожно перенаправить пользователя на новый URL-адрес , используя старый добрый HTML . Вот пример:
Это называется meta-refresh редирект. Можно задать время (в секундах ), изменив 10 на необходимое число. Обратите внимание, что этим методом редиректа часто злоупотребляют спамеры. Поэтому будьте осторожны, если вы реализуете его на общедоступном сайте.
Редирект URL-адресов с помощью PerlВот два способа редиректа URL-адресов с помощью Perl :
#!/usr/bin/perl print "Location: http://example.comnn"; exit;
Редирект URL-адресов с помощью ASP (VB Script)Чтобы перенаправить URL-адрес с помощью ASP , добавьте следующий код:
Редирект URL-адресов с помощью mod_alias Apache
Самый простой способ перенаправления на серверах Apache :
Redirect 301 /old-location.html http://example.com/new-location/
Перед тем, как сделать редирект HTML , этот код нужно добавить в файл .htaccess или файл конфигурации сервера Apache . Вот синтаксис этого метода:
[Директива] [Код состояния] [Старый URL] [Новый URL]
При необходимости можно изменить любой из этих параметров. Например, если нужно подставлять старый URL-адрес динамически, чтобы перенаправить все следующие URL-адреса :
http://example.com/old-directory/file-01.html http://example.com/old-directory/file-02.html http://example.com/old-directory/file-03.html . . .
Можно использовать RedirectMatch вместо Redirect :
RedirectMatch 301 /old-directory/file-(.*).html http://example.com/new-directory/file-$1.html
Также можно изменить код статуса с 301 (постоянный редирект ) на 302 (временный редирект ). Или на любой другой действительный код состояния. Ниже приведено руководство по регулярным выражениям, используемым в методе RedirectMatch :
Более функциональный способ редиректа с помощью Apache — использовать его переписывающий модуль mod_rewrite . Вот несколько примеров, которые можно добавить в .htaccess или в файл конфигурации Apache .
Пример 1: Редирект с www на без wwwЭтот код редиректа HTML перенаправляет все www-версии URL-адресов на их эквивалентные версии без www .
RewriteCond %{HTTP_HOST} ^www.example.com$ RewriteRule (.*) http://example.com/$1
Это называется канонизацией. Вот несколько примечаний о регулярном выражении, используемом в этом примере:
Чтобы осуществить редирект HTML с текущего домена на новый:
RewriteRule ^/(.*) https://new-domain.tld/$1
Аналогично можно перенаправить запросы из поддомена текущего сайта на поддомен на новом сайте:
RewriteCond %{HTTP_HOST} (.*).old-domain.tld RewriteRule ^/(.*) https://%1.new-domain.tld/$1
Вот несколько примечаний о регулярном выражении, используемом в этом примере:
Обратите внимание : чтобы любой из этих методов работал корректно, оба домена должны иметь одинаковую структуру файлов. Папки и ресурсы на текущем домене также должны существовать и на новом домене. В противном случае вы получите на новом домене кучу ошибок 404 .
Пример 3: Перенаправление всех файлов HTML и PHPВот еще один, более сложный пример скрипта редиректа HTML mod_rewrite :
RewriteCond %{REQUEST_URI} ^/old-directory/(.*).(html|php)$ RewriteRule (.*) http://example.com/new-directory/%1.%2
Мы перенаправляем все запросы к любым файлам HTML или PHP , расположенным в папке /old-directory/ . Все соответствующие запросы перенаправляются в тот же файл, который находится в /new-directory/ . Вот несколько примечаний о регулярном выражении, используемом в этом примере:
Вот удобный код редиректа html HTML всех ошибок 404 «Not Found» на определенный URL .
