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

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

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

Чтобы перенаправить пользователя на другой веб-сайт сразу же после открытия вашего сайта, можно использовать следующий код вверху вашей страницы, внутри элемента . Или, если вы используете отдельный .js файл , поместите следующий код в этот файл и не забудьте сослаться на него в заголовке вашей страницы:

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

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

Чтобы перенаправить пользователя на другой сайт после определенного периода времени, можно использовать следующий код:

setTimeout(function() { window.location.href = "http://www.example.com"; }, 3000);

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

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

// Проверяем, верно ли условие, и затем перенаправляем. if (...) { window.location.href = "http://www.example.com"; }

Приведенный выше код JavaScript document location href выполнит перенаправление, если условие верно:

// событие onclick присвоено элементу #button. document.getElementById("button").onclick = function() { window.location.href = "http://www.example.com"; };

Приведенный выше код выполнит перенаправление, когда пользователь нажмет на элемент #button .

Так работает переадресация в JavaScript . Надеемся, эти примеры помогут вам в организации переадресации веб-страниц.

Редирект - это автоматическое перенаправление пользователя с одного адреса на другой. То есть человек заходит на один сайт, а оказывается совсем на другом (либо на другой странице одного сайта). Я, думаю, что такое Вы видели достаточно часто. Иногда редирект делают с задержкой . В общем, тема очень важная, и её я рассмотрю в этой статье.

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

var delay = 5000;
setTimeout("document.location.href="http://b.ru"", delay);

У нашего сайта новый адрес: http://b.ru. Через 5 секунд Вы будете перенаправлены на него. Если этого не происходит, то перейдите самостоятельно: http://b.ru

Сначала пользователь увидит сообщение, а через 5 секунд он уже перейдёт по новому адресу. Если вдруг у пользователя отключён JavaScript , то тогда он может перейти самостоятельно, просто щёлкнув по ссылке.

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

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

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

Метод 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 есть функция 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: