Всі види редиректів (html, js, php, htaccess). Як зробити редирект. Всі види переадресації на javascript з затримкою

Хочете перенаправити URL-адресу з одного місця в інше? У цьому простому керівництві ми покажемо, як можна це зробити за допомогою Apache / .htaccess, PHP, JavaScript, HTML і т. Д. Кожен метод редиректу HTML ми коротко пояснимо і продемонструємо готові до використання приклади.

Редирект URL-адрес за допомогою PHP

Редирект за допомогою PHP виконується за допомогою функції header (), наприклад:

Ця функція повинна бути викликана на початку веб-сторінки до виведення HTML-коду. Щоб дізнатися більше про налаштування цього методу, ознайомтеся з документацією PHP.

Щоб виконати редирект за допомогою PHP через певний час:

Редирект на example.com виконується через 5 секунд. Ви можете змінити це значення на необхідне.

Редирект URL-адрес за допомогою JavaScript

Ось найпростіший спосіб index html редиректу за допомогою JavaScript:

Редирект 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, додайте наступний код:

<%@ Language=VBScript %> <% response.status="301 moved permanently" Response.AddHeader "Location", "http://example.com" %>

Редирект 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.

типи редиректів

Є кілька типів редиректів, розгляньте кожен з них в кратце, щоб визначити, який із них вам більше підходить.

Редирект через htaccess- найпопулярніший, і досить простий спосіб. Щоб його зробити, вам знадобиться створити в папці сайту файл з названіем.htaccess (зверніть увагу, що назва файлу починається з точки, це не помилка). Якщо ви використовуєте CMS WordPress або Joomla, то швидше за все цей файл у вас вже є, в цьому випадку вам потрібно буде просто відредагувати його.
Читайте нижче щоб дізнатися які саме інструкції в ньому потрібно прописати, щоб створити перенаправлення.

Редирект за допомогою PHP- підійде в тому випадку, якщо ви розбираєтеся в PHP і знаєте структуру свого сайту. Цей варіант підійде вам, якщо ваш сайт написаний не на CMS. В іншому випадку краще використовуйте редирект через htaccess.

редирект HTML- якщо у вас простий HTML сайт і вам потрібно зробити перенаправлення для однієї сторінки - це найпростіший варіант. Зробити перенаправлення для всього сайту цим способом буде трудозатратно, особливо якщо у вас на сайті більше 10 сторінок.

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

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

Інструкції, які ви побачите нижче, потрібно прописати в файл.htaccess в самий початок.

1. Редирект всього сайту (всіх сторінок) на інший сайт

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

   У цьому прикладі, перенаправлення буде відбуватися на сайт new-site.ru

2. Редирект однієї сторінки на іншу

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

   У цьому прикладі, перенаправлення буде відбуватися зі сторінки page-1.html на сторінку page-2.html. Обидві сторінки повинні розташовуватися на одному домені.
   Цей варіант підходить для заміни старих сторінок сайту на нові.

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

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

   У цьому прикладі, відвідувачі будуть перенаправлятися з http://www.example.ru на http://example.ru.

4. 310 редирект з однієї сторінки на іншу

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

   У цьому прикладі, відвідувачі будуть перенаправлятися зі сторінки blog / page-1.htmlна example.com/page-2.htm.

5. Редирект помилки 404

   ErrorDocument 404 /index.html

   Пропишіть цей рядок в.htaccess файлі, і тоді всі відвідувачі, яким зустрінеться помилка 404, будуть перенаправлені на index.html.

6. Редирект з 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і до відправки кук.

1. Редирект на інший сайт

   У цьому прикладі, перенаправлення буде відбуватися на сайт http://example.com

2. Тут перенаправлення буде відбуватися на http://example.com/page.html

3. редирект певноїсторінки на сторінку іншого сайту

   if ($ _ SERVER [ "REQUEST_URI"] === "blog / post-1.html") (
   header ( "Location: http://example.com/page.html");
   }
   ?>

   Тут якщо відвідувач сайту зайде на сторінку blog / post-1.html то він буде перенаправлений на http://example.com/page.html

HTML редирект

Щоб зробити редирект через HTML, потрібно додати на кожну сторінку де він планується спеціальний мета тег. Мета тег прописується всередині тега .
На великих сайтах цей метод не зручний, і рекомендується використовувати редирект через.

1. Редирект на інший сайт

   У цьому прикладі, перенаправлення буде відбуватися на сайт https: // сайт з затримкою в 5 секунд. Якщо встановити значення затримки замість 5 в 0, то відвідувач перенаправлятиметься на інший сайт моментально.

2. Редирект на сторінку іншого сайту

У цій статті я розповім, як можна перенаправити користувача з однієї веб-сторінки на іншу за допомогою 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 редиректу на іншу сторінку. Якщо я коли-небудь зіткнемося з іншими сценаріями, я додам їх в цю статтю.

редирект- це автоматичне перенаправлення користувача з однієї адреси на інший. Тобто людина заходить на один сайт, а виявляється зовсім на іншому (або на іншій сторінці одного сайту). Я, думаю, що таке Ви бачили досить часто. іноді редирект роблять із затримкою. Загалом, тема дуже важлива, і її я розгляну в цій статті.

Взагалі кажучи, мова піде зараз про об'єкті 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. Причому, Ви хочете, щоб вони знали, що у вашого сайту нову адресу. Знайома ситуація? Так ось, реалізується це за допомогою редиректу з затримкою:

У нашого сайту новий адреса: http://b.ru. Через 5 секунд Ви будете перенаправлені на нього. Якщо цього не відбувається, то перейдіть самостійно: http://b.ru

Спочатку користувач побачить повідомлення, а через 5 секунд він вже перейде на нову адресу. Якщо раптом у користувача відключений JavaScript, То тоді він може перейти самостійно, просто клацнувши по посиланню.

У цій статті ми покажемо, як можна організувати перенаправлення зі сторінки, використовуючи 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 файл, помістіть наступний код в цей файл і не забудьте послатися на нього в заголовку вашої сторінки:

Просто замініть URL-адресу з прикладу на ту адресу, куди ви хочете перенаправляти. Слід зазначити, що при цьому виді переадресації, відвідувачі взагалі не побачать вашу веб-сторінку і будуть моментально перенаправлені на цільової адресу.

Переадресація JavaScript: перенаправлення після певного періоду часу

Щоб перенаправити користувача на інший сайт після певного періоду часу, можна використовувати наступний код:

Функція JavaScript location href, наведена вище, перенаправить користувача зі сторінки через 3 секунди після повного завантаження. Ви можете змінити значення 3000 ( 3 x 1000 на миллисекундах) на свій розсуд.

Переадресація JavaScript: перенаправлення зі сторінки після події або дії користувача

Іноді потрібно відправити користувача на іншу сторінку після певної події або досконалого дії. У таких випадках можна використовувати перевірку умови або закріпити за елементом подія для виконання переадресації. Розглянемо два наступних прикладу:

Наведений вище код JavaScript document location hrefвиконає перенаправлення, якщо умова вірна:

Наведений вище код виконає перенаправлення, коли користувач натисне на елемент #button.