Доброго времени суток, подписчики и гости моего блога. Сегодня я хочу рассказать вам очень важный и востребованный материал, механизмы которого используются на многих сайтах и веб-сервисах. А именно я объясню, что из себя представляет в 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.
Так как пользователи привыкли к старой ссылке или у них в закладки занесен этот сервис еще под старым адресом, вам нужно реализовать автоматический переход. При этом реализовать задачу нужно так, чтобы клиенты увидели изменения. Для этого необходимо написать вот такую программную реализацию:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Переадресация</title> <script> var delay = 6000; setTimeout("document.location.href='http://ddd.ru'", delay); </script> </head> <body> <h1>Теперь сайт компании "****" располагается на новом адресе: <b>http://ddd.ru</b>. Через 6 секунд Вас автоматически перенаправит на него. Если переход не произошел автоматически, то перейдите по указанной ссылке: <a href='http://ddd.ru'>http://ddd.ru</a> </h1> </body> </html> |
В качестве небольшого бонуса я решил прикрепить еще один пример кода, по которому очень часто задают вопросы. Иногда возникают и другие ситуации, когда вместе с перенаправлением нужно передать некоторые данный на открываемую страницу через метод отправки POST. Такой механизм также можно реализовать через js.
Для отправки какой-либо информации в html-разметке используется тег <form>.
<form id="newSite" action= «http://ddd.ru» method="post"> … </form>
Теперь с помощью функции, написанной на JavaScript, совершается отправка данных:
1 2 3 4 | <script> $('document').ready(function() { $('#newSite ').submit(); }); </script> |
Я рассказал вам, как реализовывать переадресацию, используя средства языка js. А теперь перейдем к разбору такого же механизма, но в других языках программирования.
Redirect в html
Для осуществления перенаправления пользователя на другой сервис в html используется тег <meta>.
В примере я перенаправлю вас на официальный сайт W3C. Запустите прикрепленный код в любом доступном редакторе и проанализируйте его работу.
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="3; URL=https://www.w3.org/"> <title>Переадресация html</title> </head> <body> </body> </html> |
Расскажу немного про атрибуты тега <meta>.
http-equiv="refresh" означает, что в текущем браузерном окне откроется новый файл. Элемент content отвечает за время перенаправления (в данном случае 3 секунды) и адрес, на который будет совершен переход.
Однако такой подход срабатывает не всегда.
Переадресация в php
В php все также используется location и вписывается он в заголовок, как и в предыдущем варианте. Выглядит это следующим образом:
<?php
header («Location: https://www.w3.org/»);
?>
После отработки строки, браузеру возвратиться трехзначный код состояния редиректа. Если в атрибутах header-а не указан тип переадресации, т.е. код 201 или 3**, то автоматически возвращается 302, который сообщает о временном перемещении.
Хочу отметить важную деталь. На сегодняшний день все уважающие себя разработчики используют редирект 301. Он позволяет:
- Осуществлять суммирование важных показателей веб-сервисов, вследствие чего даже при перемещении на новый адрес сайт не теряет своих позиций в поисковых системах;
- Производить склейку доменных имен с тройным «www» и без него;
- Перенаправлять роботов и пользователей на новые функционирующие веб-страницы, вместо устаревших.
Директива .htaccess
Вот мы плавно подошли к важной, очень полезной, но и сложной директиве .htaccess. Она представляет из себя документ с конфигурациями для Apache и аналогичных серверов. Ее действие распространяется только на тот каталог, в котором она расположена. Также возможности действуют и на подкаталоги.
Redirect 301 /old.html http://www.new.html
Такую команду необходимо вставить в файл .htaccess, созданный в корневой папке проекта. Ею мы указываем, что при обращении к ссылке http://old.html будет вызван редирект на адрес http://www.new.html и при этом код 301 сообщает, что это перемещение уже зафиксировано (постоянное).
На этом пора прощаться. Не забывайте подписываться на мои обновления. Пока-пока!
С уважением, Роман Чуешов