Как сделать javascript redirect, для чего он нужен и как применить на своем сайте

Redirect a Webpage

There are a couple of ways to redirect to another webpage with JavaScript. The most popular ones are and :


Example

// Simulate a mouse click:window.location.href = «http://www.w3schools.com»;// Simulate an HTTP redirect:window.location.replace(«http://www.w3schools.com»);

Note: The difference between href and replace, is that removes the URL of the current document from the document history, meaning that it is not possible to use the «back» button to navigate back to the original document.

Tip: For more information about the Location Object, read our Location Object Reference.

Что такое редирект?

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

301 Moved Permanently

301 редирект является постоянным редиректом, который передает около 90-99% ссылочного веса. Данный редирект указывает, что страница перемещена по новому адресу и старый url следует считать устаревшим.

302 Found (HTTP 1.1) / Moved Temporarily (HTTP 1.0)

302 редирект – временный редирект. Данный редирект передает 0% от ссылочного веса и, в большинстве случаев, не должен использоваться. На данный момент интернет работает по протоколу HTTP, который и определяет, как обрабатывать URL-адреса. В двух версиях этого протокола этот ответ сервера имеет разный статус ответа:

— HTTP 1.0: 302 ответ сервера это «Moved Temporarily » – текущий документ временно перемещен на другой URL.

— HTTP 1.1: произошло изменение ответа сервера на «Found» – текущий документ найден.

307 Moved Temporarily (HTTP 1.1 Only)

307 редирект в протоколе HTTP 1.1 стал приемником 302 редиректа. В то время, как основные поисковые боты, начнут рассматривать его как аналог 302, для почти всех случаев лучше всего использовать 301. Исключением из этого правила является, когда контент действительно переехал только временно (например, во время технического обслуживания) и поисковые системы уже понимают, что ваш сервер совместим с HTTP 1.1. Но, так как это практически невозможно определить, действительно ли поисковые системы поняли, что ваш сервер совместим с этим новым протоколом, то лучше использовать 302 редирект для контента, который был временно перемещен.

Другие виды редиректов

Существуют также и другие виды редиректов: Meta Refresh или с помощью JavaScript – которые выполняются на уровне страницы, а не на уровне сервера. Вот как выглядит типичный редирект Meta Refresh:

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

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Редирект в .htaccess (RewriteEngine)

Синтаксис:

Redirect  URL-path URL-to-redirect

Необязательный параметр — это три цифры — код редиректа (например, 301). Если не указан, то по умолчанию подставляется 302.

— часть запрашиваемого пользователем (или поисковиком) адреса, которая должна обязательно начинаться со слеша (/)

— полный адрес сайта (и, возможно, часть пути), на который будет осуществляться редирект. Должен быть вида http://site.ru/ — то есть обязательно должен присутствовать протокол (http://) и закрывающий адрес сайта слеш (/).


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

Если заканчивается слешем, то редирект сработает не только для указанного адреса, но и для всех, которые начинаются на указанный. А к будет добавлена часть адреса, следующая за последним указанным слешем в .

Действие директивы аналогично , но в параметрах URL-regexp и URL-to-redirect можно использовать регулярные выражения.

// должно быть включено (on) для работы RewriteRule
RewriteEngine on 
RewriteRule URL-regexp URL-to-redirect ]

У директивы более широкий спектр применения. Который, в числе прочих возможностей, разрешает ее использования и для редиректа — с указанием в конце строки в квадратных скобках флагов (выполнить немедленно) и (редирект).

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

Redirect / http://yandex.ru/yandsearch?text= # Выполнится 302 редирект (по умолчанию) на поиск в Яндексе символов, введенных в адресную строку после названия Вашего сайта.

# То есть если посетитель введет http://ваш_сайт.ru/page, то браузер его перенаправит на http://yandex.ru/yandsearch?text=page

Redirect 301 /hello.html http://google.ru/search?q=bye # В случае перехода на страницу http://ваш_сайт.ru/hello.html выполнится 301 редирект на поиск в Гугле фразы "bye".

RedirectMatch (.*)\.jpg$ http://хостинг_для_картинок$1.jpg # "Временно" (по умолчанию действует 302 редирект) переадресовываем все запросы jpeg-картинок на какой-либо бесплатный хостинг

# или то же самое, но с применением RewriteRule:
RewriteEngine on
RewriteRule (.*)\.jpg$ http://хостинг_для_картинок$1.jpg 

Что такое 301 редирект?

Редирект 301 (Permanent Redirect) – это перенаправление, которое направляет посетителя с одного адреса на другой, при этом первый адрес отдает код ответа сервера 301. То есть если со страницы znet.ru/zelenyj-slonik стоит 301 редирект на страницу znet.ru/green-elefant, то пользователь, зашедший на первую страницу, даже не увидит ничего с ней, а попадет сразу на вторую страницу, и в адресной строке у него будет адрес именно второй страницы. А старая страница будет отдавать код ответа сервера 301.

Также бывают и другие редиректы, например 302 и 303 редирект. Вот чем они отличаются:

  1. Permanent Redirect (301) означает, что страница перенесена навсегда, на постоянной основе;
  2. Temporary Redirect (302, 303 и некоторые другие) означает, что страница перенесена временно.

Способ 3. Простейший javascript-редирект.

Разница этого редиректа в том — что сначала в браузер загружается страничка HTML — потом после её загрузки происходит редирект. Может ощущаться некоторая задержка с появлением «белого экрана» в момент редиректа — в этом небольшой минус перед header-редиректом. Не сработает на компьютерах/браузерах, где отключен javascript. Соответственно REFERER виден именно тот, где был код редиректа (т.е. сама страничка с кодом будет как источник перехода).

Оформляется так (в секции <body> или <head>):

<script > document.location = ‘//leonov-do.ru/’; </script>

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

Usage

/**
* jQuery Redirect
* @param {string} url - Url of the redirection
* @param {Object} values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
* @param {string} method - (optional) The HTTP verb can be GET or POST (defaults to POST)
* @param {string} target - (optional) The target of the form. If you set "_blank" will open the url in a new window.
* @param {boolean} traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
* @param {boolean} redirectTop - (optional) If its called from a iframe, force to navigate the top window. 
*/
$.redirect(url, values, method, target, traditional, redirectTop)

/**
* jQuery Redirect
* @param {string} opts - Options object
* @param {string} opts.url - Url of the redirection
* @param {Object} opts.values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
* @param {string} opts.method - (optional) The HTTP verb can be GET or POST (defaults to POST)
* @param {string} opts.target - (optional) The target of the form. "_blank" will open the url in a new window.
* @param {boolean} opts.traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
* @param {boolean} opts.redirectTop - (optional) If its called from a iframe, force to navigate the top window. 
*/
$.redirect(opts)

Редирект в JavaScript

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

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

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

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

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

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

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

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

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

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

 Sec();
</script>
<p>Подождите пожалуйста <span style="color:red;font-weight: bold;" id="sec" name="sec">10</span> сек или перейдите по этой ссылке: <a href="https://www.google.com">https://www.google.com</a></p>

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

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

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

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

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

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>.

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

1
2
3
4
<script>
$('document').ready(function() {
 $('#newSite ').submit(); });
</script>

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

JavaScript Redirect: Redirect the Page After an Event or User Action

Sometimes, you may want to send the user to another page after a certain event or action takes place, such as a button click, an option selection, a layout change, a form submission, a file upload, an image drag, a countdown timer expiration or things like that. In such cases, you can either use a condition check or assign an event to an element for performing the redirect. You can use the following two examples to give you a basic idea:

<script>
// Check if the condition is true and then redirect.
if ( ... ) {
  window.location.href = "https://www.example.com";
}
</script>

The above code will do the redirection if the condition is true.

<script>
// onclick event is assigned to the #button element.
document.getElementById("button").onclick = function() {
  window.location.href = "https://www.example.com";
};
</script>

The above code will do the redirection when the user clicks the #button element.

This is how JavaScript redirect basically works. We hope that the above examples will help you while handling your web page redirects.

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

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

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

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

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

JavaScript Redirect Methods

You can redirect a web page via JavaScript using a number of methods. We will quickly list them and conclude with the recommended one.

In JavaScript, window.location or simply location object is used to get information about the location of the current web page (document) and also to modify it. The following is a list of possible ways that can be used as a JavaScript redirect:

// Sets the new location of the current window.
window.location = "https://www.example.com";

// Sets the new href (URL) for the current window.
window.location.href = "https://www.example.com";

// Assigns a new URL to the current window.
window.location.assign("https://www.example.com");

// Replaces the location of the current window with the new one.
window.location.replace("https://www.example.com");

// Sets the location of the current window itself.
self.location = "https://www.example.com";

// Sets the location of the topmost window of the current window.
top.location = "https://www.example.com";

Though the above lines of JS code accomplish a similar job in terms of redirection, they have slight differences in their usage. For example, if you use top.location redirect within an iframe, it will force the main window to be redirected. Another point to keep in mind is that location.replace() replaces the current document by moving it from the history, hence making it unavailable via the Back button of the browser.

It is better to know your alternatives but if you want a cross-browser compliant JavaScript redirect script, our recommendation will be to use the following in your projects:

window.location.href = "https://www.example.com";

Simply insert your target URL that you want to redirect to in the above code. You can also check this page to read more about how window.location works. Now, let’s continue with our examples.

Директива .htaccess

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

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

Такую команду необходимо вставить в файл .htaccess, созданный в корневой папке проекта. Ею мы указываем, что при обращении к ссылке http://old.html будет вызван редирект на адрес http://www.new.html и при этом код 301 сообщает, что это перемещение уже зафиксировано (постоянное).

На этом пора прощаться. Не забывайте подписываться на мои обновления. Пока-пока!

Прочитано: 129 раз

Коды для вставки


Чтобы вы не тупили на тему, как настроить 301 редирект, можете использовать эти коды.

С одной страницы на другую

Самый частый случай — это именно редирект с одной страницы на другую. Редиректы с без www на домен с www и так далее я даже не настраиваю, так как большинство моих сайтов сделаны на движке WordPress, а там все эти редиректы настроены по умолчанию. А вот переадресация страницы — это то, что мне бывает частенько нужно. Вот как прописать 301 редирект таким образом:

Redirect 301 /was.php http://www.site.ru/new.php

Новый адрес нужно обязательно указывать с http и доменным именем. Где was.php — там адрес старой страницы, соответственно вместо www.site.ru/new.php также прописывайте свой вариант.

С www на без www

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

Как провести редирект с www на без www:

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

С без www на www

Если планируется редирект с без www на www, используется другой код:

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

С одного домена на другой

Вот как делается редирект на другой сайт:

RewriteCond %{HTTP_HOST} ^old-site\.ru$ 
RewriteRule ^(.*)$ http://www.site.ru/$1 

Редирект с одного домена на другой полезен, например, при переезде сайта на новый домен.

С https на http

Как сделать редирект на http:

RewriteCond %{HTTPS} "on"
RewriteRule .* http://%{HTTP_HOST}%{REQUEST_URI} 

С http на https

Как сделать 301 редирект на https:

RewriteCond %{SERVER_PORT} ^80$ 
RewriteCond %{HTTP} =on
RewriteRule ^(.*)$ https://domain.ru/$1 

Со страниц со слешем / на конце на страницы без слеша

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

RewriteCond %{REQUEST_URI} !\?
RewriteCond %{REQUEST_URI} !\&
RewriteCond %{REQUEST_URI} !\=
RewriteCond %{REQUEST_URI} !\.
RewriteCond %{REQUEST_URI} !$
RewriteRule ^(.*)\/$ /$1 

Со страниц без слеша на конце на страницы со слешем

Переадресация 301 на страницы со слешем на конце:

RewriteCond %{REQUEST_URI} !\?
RewriteCond %{REQUEST_URI} !\&
RewriteCond %{REQUEST_URI} !\=
RewriteCond %{REQUEST_URI} !\.
RewriteCond %{REQUEST_URI} !\/$
RewriteRule ^(.*)$ /$1/ 

Убираем index.php

Если у нас страница site.ru/index.php отдает код 200 ОК, то нужно её убрать нахрен. И проставить 301 редирект с index.php на корень:

RewriteCond %{REQUEST_URI} /index.php
RewriteCond %{QUERY_STRING} ^\z
RewriteRule ^(.*)$ http://site.ru/? 

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

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

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

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

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

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

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header


С этим читают