JavaScript – Перенаправление страницы. Перенаправление на другую страницу с помощью JavaScript С сохранением GET-параметров

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

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

В ы, возможно, сталкивались с ситуацией, когда вы нажали на URL – адрес, чтобы достичь страницы X, но внутренне вы были направлены на другую страницу Y. Это происходит из-за перенаправления страниц . Эта концепция отличается от обновления страницы в JavaScript.

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

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

Пример реализации перенаправления страницы следующий:

Пример 1

Это довольно просто сделать переадресацию страницы с помощью JavaScript на стороне клиента. Для перенаправления посетителей сайта на новую страницу, вам просто нужно добавить строку в головной секции следующим образом.

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

Пример 2

Вы можете показать соответствующее сообщение для ваших посетителей сайта, а затем перенаправить их на новую страницу. Для этого потребуется задержка времени, чтобы загрузить новую страницу. В следующем примере показано, как реализовать то же самое. Здесь SetTimeout () является встроенной функцией JavaScript, которая может быть использована для выполнения другой функции по истечению заданного интервала времени.

Вывод Вы будете перенаправлены на главную страницу через 10 сек.! Пример 3

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

Редирект (от англ. redirect – переориентировать) – это переадресация страницы сайта на какую-то другую страницу или другой сайт. Редирект можно сделать различными способами, основные из которых и будут здесь рассмотрены., а именно redirect на php , javascript , редирект при помощи html и при помощи файла htaccess .

Среди перечисленных способов, наиболее актуальными являются php redirect и редирект при помощи.htaccess . Дело в том, что именно эти способы позволяют не только переадресовать страницу, но и вернуть специальную 301 ошибку (301 Permament Redirect). Для чего же это нужно? А нужно это для поисковых систем.

Допустим у нас был раскрученный сайт с большим числом посетителей. Затем сайт был перемещён на новый домен. Поисковая система его ещё не знает. 301 редирект позволяет как бы “склеить” старый и новый адрес, сохранив при этом все те элементы оптимизации, которые были сделаны для этого сайта, тем самым сохранив посещаемость и аудиторию самого сайта.

А теперь рассмотрим все перечисленные варианты редиректов, и начнём с редиректа на php.

PHP redirect (301)

Редирект на php, как и на других языках программирования, основан на спецификации протокола HTTP, а именно отправки необходимых заголовков. Как это работает? Довольно просто. Каждый раз, когда мы обращаемся к какой-то странице интернета, мы получаем HTTP ответ от сервера, который содержит заголовки (header) и тело (body). В теле ответа

Редирект HTML

В языке разметки HTML есть специальный мета-тег, предназначенный для переадресации.

Изменяется только поле content, где указывается количество секунд до переадресации и собственно ссылка, куда будет производиться редирект. Думаю не стоит говорить, что тег помещается в html-код между тегами head.

Редирект JavaScript

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


function reload() {location = "http://site.com"}; setTimeout("reload()", 0);

В данном коде создаётся функция с переадресацией на нужную страницу, а затем вызывается в функции setTimeout, что позволяет произвести переадресацию спустя необходимое время.

Редирект htaccess (301)

Файл.htaccess – это служебный файл с различными дополнительными настройками сервера Apache. Размещается он вручную, в нашем случае, в корне сайта. С его помощью можно устраивать 301 редиректы, однако для этого в Апаче должны быть включены необходимые модули.

Использование директив модуля mod_alias

В данном модуле существуют три директивы: Redirect, RedirectPermanent и RedirectMatch. Первые две вроде как идентичны по своим свойства, третья идёт особняком. Для первых двух пример:

Redirect 301 / http://site.com
Redirect permanent /index.html http://site.com
RedirectPermanent /index.html http://site.com/default.html

Строчки схожи. Но вроде как существует один минус – чтобы перенаправить все страницы, нужно их все и будет указать в списке. Чтобы как-то облегчить задачу, существует та другая директива:

RedirectMatch /(.*)\.html$ /$1.php

Можно задавать регулярные выражения для переадресации со старого урла на новый.

Использование директив модуля mod_rewrite

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

#включаем модуль и необходимую доп.опцию
RewriteEngine On
Options +FollowSymLinks
#две строки для переадресации от "без ввв" к "с ввв"
RewriteCond %{HTTP_HOST} ^site.com
RewriteRule (.*) http://www.site.com/$1

Вместо заключения

Если вас всё ещё мучает вопрос, на чём же остановить свой выбор (конечно мучает, тисками и ножницами – прим.ред. ), то пора перестать мучиться (да что вы говорите! – прим.ред. ). Останавливаем взор на редиректе php (или другого языка программирования, которые здесь не были рассмотрены, например Perl) и редиректе при помощи файла.htaccess, поскольку именно они позволяют перенести сайт без всяких потерь для оптимизации в поисковых системах. Если оно не важно, то тогда подойдёт любой метод. И собственно на этой заключительной ноте (соль? ля? си? – прим.ред. ) я и заканчиваю этот пост.

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

Вообще говоря, речь пойдёт сейчас об объекте 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 , то тогда он может перейти самостоятельно, просто щёлкнув по ссылке.

Хотите перенаправить URL-адрес из одного места в другое? В этом простом руководстве мы покажем, как можно это сделать с помощью Apache / .htaccess , PHP , JavaScript , HTML и т. д. Каждый метод редиректа HTML мы кратко поясним и продемонстрируем готовые к использованию примеры.

Редирект URL-адресов с помощью PHP

Редирект с помощью PHP выполняется с помощью функции header() , например:

Эта функция должна быть вызвана в начале веб-страницы до вывода HTML-кода . Чтобы узнать больше о настройке этого метода, ознакомьтесь с документацией PHP .

Чтобы выполнить редирект с помощью PHP через определенное время:

Редирект на example.com выполняется через 5 секунд. Вы можете изменить это значение на необходимое.

Редирект URL-адресов с помощью JavaScript

Вот самый простой способ index html редиректа с помощью JavaScript :

document.location.href = "http://example.com/";

Редирект 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 , добавьте следующий код:

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