Переадресация на javascript с задержкой. Как сделать редирект

Примеры редиректов или же перенаправлений на другую страницу.

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

4. Редирект через.htaccess

Redirect / http://url4trafic.ru

При перенаправлении трафика из социальных сетей в общих случаях наиболее актуален вариант из примера №1, с небольшим дополнением - а именно - с использованием ogp разметки. Чтоб было немного понятней - разметка Open Graph это протокол разметки контента страницы для отправки её содержимого в социальные сети. При публикации ссылки в социальную сеть вы можете «вручную» указать какие картинку-миниатюру и описание отображать.

Работающий пример (возможны неточности и недочёты, но оно таки работает:)

Заголовок страницы

Как это выглядит при публикации вКонакте:

Краткий разбор моментов:
- указывает что будет использоваться разметка Open Graph
- - заполняем заманчивое описание - в примере выше это «Джон Сина назвал дату своего возвращения»
- Заголовок страницы - интригующий заголовок - в примере выше это «Джон Сина возвращается к выступлениям - Новости реслинга WWE»
- - это путь к изображению, которое будет загружаться - в примере выше этот тот самые мужик в синей майке.
Чтобы ссылка получилась красивой и большой - изображение изначально должно быть достаточных размеров. Для вКонтакте например, это больше 537x240 пикселей. Лучше - больше.

Location="http://url4trafic.ru" - это как вы уже догадались url, куда мы будем отправлять пользователя.

Что такое редирект простыми словами

Редирект (англ. "Redirect") - это автоматическое перенаправление пользователей с одной страницы сайта на другую страницу (причем как в пределах одного сайта, так и на внешние сайты). Для поисковых систем редирект применяется для склейки адресов страниц.

У каждого редиректа есть свой номер, который отвечает за его функцию. Существуют следующие виды редиректов:

300 редирект - множественный выбор;
- перемещен навсегда;
302 редирект - документ найден;
303 редирект - смотри другое;
304 редирект - документ не изменился;
305 редирект - используй прокси;
306 редирект - не используется;
307 редирект - временный редирект;

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

Существует несколько способов сделать редирект. У каждого есть свои плюсы и минусы. Ниже мы рассмотрим каждый из них в отдельности с примерами.

1. Редирект через JavaScript

JavaScript имеет широкий набор функций для осуществления редиректа. Ниже в примере представлены различные редиректы выполненные с помощью различных функций 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);
/АДРЕС_ОТКУДА - страница, с которой будет осуществлен переход. Обязательно должна начинаться со слэша "/";
АДРЕС_КУДА - указываем полный адрес (URL) куда будет осуществлена переадресация;

Примеры редиректа через.htaccess 1) Редирект с www и без www

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 секунд

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

Проверить правильность настройки редиректа можно через сервис