Js перенаправить на другую страницу. Все виды редиректов (html, js, php, htaccess)
Редирект (англ. "Redirect") - это автоматическое перенаправление пользователей с одной страницы сайта на другую страницу (причем как в пределах одного сайта, так и на внешние сайты). Для поисковых систем редирект применяется для склейки адресов страниц.
У каждого редиректа есть свой номер, который отвечает за его функцию. Существуют следующие виды редиректов:
- 300 редирект - множественный выбор;
- - перемещен навсегда;
- 302 редирект - документ найден;
- 303 редирект - смотри другое;
- 304 редирект - документ не изменился;
- 305 редирект - используй прокси;
- 306 редирект - не используется;
- 307 редирект - временный редирект;
Лидером использования среди этих редиректов является . Он используется, когда адрес страницы сайта изменился навсегда. Как показывает практика - это наиболее часто встречающаяся ситуация. Во всех примерах ниже, как раз будет именно он.
Существует несколько способов сделать редирект. У каждого есть свои плюсы и минусы. Ниже мы рассмотрим каждый из них в отдельности с примерами.
1. Редирект через JavaScriptJavaScript имеет широкий набор функций для осуществления редиректа. Ниже в примере представлены различные редиректы выполненные с помощью различных функций 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) куда будет осуществлена переадресация;
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 секундКакой способ редиректа выбрать?
На мой взгляд самым лучшим является , поскольку все описывается в одном файле и происходит уже не уровне обработки веб-сервера, то есть не требуется загрузки страницы. Это в свою очередь может довольно сильно ускорить процесс загрузки. Во всех других случаях необходимо наличие лишней страницы и небольшой временной задержки из-за того, что страница должна загрузиться хотя бы частично.
Проверить правильность настройки редиректа можно через сервис
В этой статье мы покажем, как можно организовать перенаправление со страницы, используя 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 файл , поместите следующий код в этот файл и не забудьте сослаться на него в заголовке вашей страницы:
window.location.href = "http://www.example.com";
Просто замените URL-адрес из примера на тот адрес, куда вы хотите перенаправлять. Следует отметить, что при этом виде переадресации, посетители вообще не увидят вашу веб-страницу и будут моментально перенаправлены на целевой адрес.
Переадресация JavaScript: перенаправление после определенного периода времениЧтобы перенаправить пользователя на другой сайт после определенного периода времени, можно использовать следующий код:
setTimeout(function() { window.location.href = "http://www.example.com"; }, 3000);
Функция JavaScript location href , приведенная выше, перенаправит пользователя со страницы через 3 секунды после полной загрузки. Вы можете изменить значение 3000 (3 x 1000 в миллисекундах ) на свое усмотрение.
Переадресация JavaScript: перенаправление со страницы после события или действия пользователяИногда нужно отправить пользователя на другую страницу после определенного события или совершенного действия. В таких случаях можно использовать проверку условия или закрепить за элементом событие для выполнения переадресации. Рассмотрим два следующих примера:
// Проверяем, верно ли условие, и затем перенаправляем. 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 redirect.
В этой публикации вы найдете множество полезной информации о редиректе, узнаете о его главной отрасли применения. Также я расскажу, как можно создать redirect, используя php, html и даже.htaccess. И конечно же после каждой ключевой главы вы найдете примеры. А теперь приступим к разбору полетов!
Что такое redirect и с какой целью он было создан?В переводе с английского redirect означает «перенаправлять, переадресовывать». И правда, с помощью redirect-а происходит автоматическое перенаправление пользователей на другие страницы веб-ресурсов по заранее заданному анкору (ссылке).
Каждый из вас хоть раз сталкивался с такими ситуациями, когда заходишь на один сайт , а он перенаправляет тебя на ту же страницу , только расположенную по новой ссылке. Также случаются и перенаправления пользователей на другие страницы или рекламу. Все это реализовано при помощи редиректов.
Благодаря такому механизму можно гибко управлять переадресацией: устанавливать переход на новые страницы с задержкой, в случае изменения домена перенаправлять пользователя на новый адрес по url без дополнительных действий последнего, открывать страницы в новой вкладке, организовывать redirect back при неудачной перессылке и т.д.
За такие действия в JavaScript отвечает объект document.location . На самом деле этот объект обладает рядом свойств, которые нужны для получения полной информации о веб-странице (page).
На данный момент я расскажу об одном свойстве, которое используется для перенаправления страниц – href. Если же есть желание углубить знания, то поищите информацию в документации.
Как с помощью document.location.href реализовать redirect?Итак, document.location.href содержит в себе полный путь к страницам веб-сервиса. Если вы сейчас в любом онлайн-редакторе запустите строку document.write (document.location.href), то в ответе получите полную ссылку на вкладку, в которой это написали.
Для того чтобы реализовать редирект, нужно просто этому свойству присвоить другой адрес.
Я решил привести пример на конкретном задании, которое часто можно встретить среди тасков в реальных проектах.
Итак, у вас имеется какой-то веб-ресурс, который расположен по ссылке, например, http://pfd.ru. Но со временем вами был приобретен новый более подходящий домен и поэтому сайт был перенесен на новый адрес – http://ddd.ru.
Так как пользователи привыкли к старой ссылке или у них в закладки занесен этот сервис еще под старым адресом, вам нужно реализовать автоматический переход. При этом реализовать задачу нужно так, чтобы клиенты увидели изменения. Для этого необходимо написать вот такую программную реализацию:
Переадресация var delay = 6000; setTimeout("document.location.href="http://ddd.ru"", delay); Теперь сайт компании "****" располагается на новом адресе: http://ddd.ru. Через 6 секунд Вас автоматически перенаправит на него. Если переход не произошел автоматически, то перейдите по указанной ссылке: http://ddd.ru
В качестве небольшого бонуса я решил прикрепить еще один пример кода, по которому очень часто задают вопросы. Иногда возникают и другие ситуации, когда вместе с перенаправлением нужно передать некоторые данный на открываемую страницу через метод отправки POST. Такой механизм также можно реализовать через js.
Для отправки какой-либо информации в html-разметке используется тег .
…
Теперь с помощью функции, написанной на JavaScript, совершается отправка данных:
1 2 3 4 | $("document").ready(function() { $("#newSite ").submit(); }); |
$("document").ready(function() { $("#newSite ").submit(); });
Я рассказал вам, как реализовывать переадресацию, используя средства языка js. А теперь перейдем к разбору такого же механизма, но в других языках программирования.
Redirect в htmlДля осуществления перенаправления пользователя на другой сервис в html используется тег .
В примере я перенаправлю вас на официальный сайт W3C. Запустите прикрепленный код в любом доступном редакторе и проанализируйте его работу.
1 2 3 4 5 6 7 8 9 | Переадресация html |
Переадресация html
Расскажу немного про атрибуты тега .
означает, что в текущем браузерном окне откроется новый файл. Элемент content отвечает за время перенаправления (в данном случае 3 секунды) и адрес, на который будет совершен переход.
Однако такой подход срабатывает не всегда.
Переадресация в phpВ php все также используется location и вписывается он в заголовок, как и в предыдущем варианте. Выглядит это следующим образом:
header («Location: https://www.w3.org/»);
После отработки строки, браузеру возвратиться трехзначный код состояния редиректа. Если в атрибутах header-а не указан тип переадресации, т.е. код 201 или 3**, то автоматически возвращается 302, который сообщает о временном перемещении.
Хочу отметить важную деталь. На сегодняшний день все уважающие себя разработчики используют редирект 301. Он позволяет:
- Осуществлять суммирование важных показателей веб-сервисов, вследствие чего даже при перемещении на новый адрес сайт не теряет своих позиций в поисковых системах;
- Производить склейку доменных имен с тройным «www» и без него;
- Перенаправлять роботов и пользователей на новые функционирующие веб-страницы, вместо устаревших.
Вот мы плавно подошли к важной, очень полезной, но и сложной директиве.htaccess. Она представляет из себя документ с конфигурациями для Apache и аналогичных серверов. Ее действие распространяется только на тот каталог, в котором она расположена. Также возможности действуют и на подкаталоги.
Редирект - это автоматическое перенаправление пользователя с одного адреса на другой. То есть человек заходит на один сайт, а оказывается совсем на другом (либо на другой странице одного сайта). Я, думаю, что такое Вы видели достаточно часто. Иногда редирект делают с задержкой . В общем, тема очень важная, и её я рассмотрю в этой статье.
Вообще говоря, речь пойдёт сейчас об объекте 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 , то тогда он может перейти самостоятельно, просто щёлкнув по ссылке.
Примеры редиректов или же перенаправлений на другую страницу.
Редирект в 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: