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

Доброго времени суток, подписчики и гости моего блога. Сегодня я хочу рассказать вам очень важный и востребованный материал, механизмы которого используются на многих сайтах и веб-сервисах. А именно я объясню, что из себя представляет в JavaScript redirect.

В этой публикации вы найдете множество полезной информации о редиректе, узнаете о его главной отрасли применения. Также я расскажу, как можно создать redirect, используя php, html и даже.htaccess. И конечно же после каждой ключевой главы вы найдете примеры. А теперь приступим к разбору полетов!

Что такое redirect и с какой целью он было создан?

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

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

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

За такие действия в JavaScript отвечает объект document.location . На самом деле этот объект обладает рядом свойств, которые нужны для получения полной информации о веб-странице (page).

На данный момент я расскажу об одном свойстве, которое используется для перенаправления страниц – href. Если же есть желание углубить знания, то поищите информацию в документации.

Как с помощью document.location.href реализовать redirect?

Итак, document.location.href содержит в себе полный путь к страницам веб-сервиса. Если вы сейчас в любом онлайн-редакторе запустите строку document.write (document.location.href), то в ответе получите полную ссылку на вкладку, в которой это написали.

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

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

Итак, у вас имеется какой-то веб-ресурс, который расположен по ссылке, например, http://pfd.ru. Но со временем вами был приобретен новый более подходящий домен и поэтому сайт был перенесен на новый адрес – http://ddd.ru.

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

Переадресация var delay = 6000; setTimeout("document.location.href="http://ddd.ru"", delay); Теперь сайт компании "****" располагается на новом адресе: http://ddd.ru. Через 6 секунд Вас автоматически перенаправит на него. Если переход не произошел автоматически, то перейдите по указанной ссылке: http://ddd.ru

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

Для отправки какой-либо информации в html-разметке используется тег .

…

Теперь с помощью функции, написанной на JavaScript, совершается отправка данных:

1 2 3 4 $("document").ready(function() { $("#newSite ").submit(); });

$("document").ready(function() { $("#newSite ").submit(); });

Я рассказал вам, как реализовывать переадресацию, используя средства языка js. А теперь перейдем к разбору такого же механизма, но в других языках программирования.

Redirect в html

Для осуществления перенаправления пользователя на другой сервис в html используется тег .

В примере я перенаправлю вас на официальный сайт W3C. Запустите прикрепленный код в любом доступном редакторе и проанализируйте его работу.

1 2 3 4 5 6 7 8 9 Переадресация html

Переадресация html

Расскажу немного про атрибуты тега .

означает, что в текущем браузерном окне откроется новый файл. Элемент content отвечает за время перенаправления (в данном случае 3 секунды) и адрес, на который будет совершен переход.

Однако такой подход срабатывает не всегда.

Переадресация в php

В php все также используется location и вписывается он в заголовок, как и в предыдущем варианте. Выглядит это следующим образом:

header («Location: https://www.w3.org/»);

После отработки строки, браузеру возвратиться трехзначный код состояния редиректа. Если в атрибутах header-а не указан тип переадресации, т.е. код 201 или 3**, то автоматически возвращается 302, который сообщает о временном перемещении.

Хочу отметить важную деталь. На сегодняшний день все уважающие себя разработчики используют редирект 301. Он позволяет:

  • Осуществлять суммирование важных показателей веб-сервисов, вследствие чего даже при перемещении на новый адрес сайт не теряет своих позиций в поисковых системах;
  • Производить склейку доменных имен с тройным «www» и без него;
  • Перенаправлять роботов и пользователей на новые функционирующие веб-страницы, вместо устаревших.
Директива.htaccess

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

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

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, куда мы будем отправлять пользователя.

Хотите перенаправить URL-адрес из одного места в другое? В этом простом руководстве мы покажем, как можно это сделать с помощью Apache / .htaccess , PHP , JavaScript , HTML и т. д. Каждый метод редиректа HTML мы кратко поясним и продемонстрируем готовые к использованию примеры.

Редирект URL-адресов с помощью PHP

Редирект с помощью PHP выполняется с помощью функции header() , например:

Эта функция должна быть вызвана в начале веб-страницы до вывода 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 :

  • или отсутствию символа );
  • $1 — возвращает шаблон, сопоставляемый первым (.*) .
Редирект URL-адресов с помощью mod_rewrite Apache

Более функциональный способ редиректа с помощью Apache — использовать его переписывающий модуль mod_rewrite . Вот несколько примеров, которые можно добавить в .htaccess или в файл конфигурации Apache .

Пример 1: Редирект с www на без www

Этот код редиректа HTML перенаправляет все www-версии URL-адресов на их эквивалентные версии без www .

RewriteCond %{HTTP_HOST} ^www.example.com$ RewriteRule (.*) http://example.com/$1

Это называется канонизацией. Вот несколько примечаний о регулярном выражении, используемом в этом примере:

  • . — буквально соответствует точке;
  • $ — обозначает конец запрошенного URI ;
  • (.*) — соответствует любому символу (или отсутствию символов );
Пример 2: Редирект всего домена

Чтобы осуществить редирект HTML с текущего домена на новый:

RewriteRule ^/(.*) https://new-domain.tld/$1

Аналогично можно перенаправить запросы из поддомена текущего сайта на поддомен на новом сайте:

RewriteCond %{HTTP_HOST} (.*).old-domain.tld RewriteRule ^/(.*) https://%1.new-domain.tld/$1

Вот несколько примечаний о регулярном выражении, используемом в этом примере:

  • ^ — обозначает начало запрошенного URI ;
  • (.*) — соответствует любому символу (или отсутствию символов );
  • $1 — соответствует шаблону из круглых скобок (.*) в RewriteRule ;
  • %1 — соответствует первому шаблону из круглых скобок (.*) в RewriteCond
  • — отправляет код состояния 301 и инструктирует Apache прекратить обработку набора правил.

Обратите внимание : чтобы любой из этих методов работал корректно, оба домена должны иметь одинаковую структуру файлов. Папки и ресурсы на текущем домене также должны существовать и на новом домене. В противном случае вы получите на новом домене кучу ошибок 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/ . Вот несколько примечаний о регулярном выражении, используемом в этом примере:

  • ^ — обозначает начало запрошенного URI;
  • (.*) — соответствует любому символу (или отсутствию символов );
  • . — буквально соответствует точке;
  • (html php) — соответствует либо html , либо php ;
  • — делает шаблон нечувствительным к регистру;
  • %1 — соответствует первому шаблону из круглых скобок (. *) в RewriteCond ;
  • %2 — соответствует второму шаблону из круглых скобок (html|php ) в RewriteCond ;
  • — отправляет код состояния 301 и инструктирует Apache прекратить обработку набора правил.
Редирект ошибки 404 с помощью Apache

Вот удобный код редиректа html HTML всех ошибок 404 «Not Found» на определенный URL .

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

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

Я попытался рассмотреть все возможные случаи js редиректа на другую страницу . Если я когда-либо столкнусь с другими сценариями, я добавлю их в эту статью.

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

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

Редирект через 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, то посетитель будет перенаправляться на другой сайт моментально.

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