Javascript перенаправление на другую страницу

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

Вы можете перенаправлять пользователя с одной веб-страницы на любую другую несколькими способами. В том числе с помощью обновления мета-данных HTML , перенаправления на стороне сервера. Например, используя файл .htaccess , PHP , и с помощью перенаправления на стороне клиента через JavaScript .

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

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

Автоматическое JavaScript-перенаправление на другую страницу

Если нужно автоматически перенаправить пользователя с одной страницы ( URL1 ) на другую страницу ( URL2 ), можно использовать следующий код:

Необходимо вставить приведенный выше код на первую страницу ( URL1 ). Замените URL2 на нужный адрес страницы. Лучше поместить этот код внутри элемента ( а не в нижней части страницы ), чтобы страница перенаправлялась до того, как браузер начинает ее отображать.

Перенаправление на другую страницу через X секунд

В этом примере мы будем осуществлять js редирект на другую страницу через некоторое время после загрузки страницы. Например, если нужно перенаправить посетителя на главную страницу после отображения страницы приветствия в течение 5 секунд:

Необходимо вставить приведенный код JavaScript на странице приветствия. Не забудьте заменить homepage-url на URL-адрес домашней страницы.

Мы использовали метод setTimeout , чтобы указать скрипту выполнить перенаправление через 5 секунд ( умножаем 5 на 1000, чтобы преобразовать секунды в миллисекунды ).

Перенаправление на другую страницу, исходя из условия

Например, можно выполнить перенаправление в зависимости от браузера посетителя ( хотя это не рекомендуется ), размера экрана, времени суток, или другого условия.

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

Например, этот код перенаправляет посетителей на другую страницу, если ширина их экрана меньше 600 пикселов:

Перенаправление на другую страницу на основе действий пользователя

Последний пример демонстрирует, как перенаправить посетителя, основываясь на его действиях. Вы можете привязать js редирект к любому типу действия пользователя. В данном примере для простоты мы будем обрабатывать нажатие кнопки.

Следующий код будет перенаправлять посетителя на целевую страницу после нажатия на #mybutton :

Читайте также:  Как поставить пароль на уже созданный архив

Можно сделать то же самое, используя следующий код:

Также можно связать перенаправление с любым событием или действием пользователя. Только не забудьте удостовериться, что ваши редиректы не вызовут разочарования пользователей.

Я попытался рассмотреть все возможные случаи js редиректа на другую страницу . Если я когда-либо столкнусь с другими сценариями, я добавлю их в эту статью.

Данная публикация представляет собой перевод статьи « Redirect to Another Page with JavaScript » , подготовленной дружной командой проекта Интернет-технологии.ру

Редирект может быть использован для перенаправления посетителей сайта с одной страницы на другую. При редиректе с помощью ява скрипт используются методы объекта location :

1. Метод replace() позволяет заменить одну страницу другой таким образом, что это замещение не будет отражено в истории просмотра HTML-страниц (history) браузера, и при нажатии на кнопку Back, из панели инструментов, пользователь всегда будет попадать на первую загруженную обычным способом страницу.

2. При изменении свойств location также происходит перезагрузка страниц, но в этом случае записи об их посещении в history пропадают.

3. Метод reload() полностью моделирует поведение браузера при нажатии на кнопку reload в панели инструментов. Если вызывать метод без аргумента или указать его равным true, то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера.
Такое поведение соответствует нажатию на кнопку reload.

Если в качестве аргумента указать false, то браузер перезагрузит текущий документ с сервера. Такое поведение соответствует одновременному нажатию на reload и кнопки клавиатуры shift (reload+shift).

Переадресация страницы через Meta теги HTML

Здесь 1 – время задержки в секундах.

Примеры скриптов для переадресации страниц

Теперь,на основании всего вышеизложенного, приведём примеры javascript redirect т.е. переадресации:
Следующий код вставляется в раздел HEAD документа HTML:

Теперь, надо предусмотреть случай если у клиента отлючен ява скрипт
Для этого ипользуем теги в которых применяем переадресацию с помощью метатэгов HTML.
Для задержки самого редиректа используется фунция setTimeout() в ней 5000 – обозначает изменить текущий адрес страницы через 5 секунд (5000 миллисекунд) Пока будут идти эти 5сек Вы можете вывести пользователю какое либо сообщение типа: "Подождите 5 сек или перейдите по этой ссылке."

Иногда бывает необходимо сделать редирект с таймером прямого или обратного отчёта времени и его выводом на экране во время задержки javascript редиректа.
Сделать это можно с помощью функции setTimeout() следующим образом: мы будем через неё рекурсивно вызывать функцию котороя через 1 сек будет уменьшать или увеличивать значение которым изначально была инициализирована переменная.
А значение этой переменной мы будем показывать пользователю.

Читайте также:  Ffmpeg exe что это

Ваши вопросы присылайте по адресу mailto.jsbeginning@gmail.com они, вместе с ответами, будут опубликованы на сайте.
Укажите к какому разделу сайта относится Ваш вопрос также Ваш ник или имя.

Полезные бесплатные видеокурсы: Полезные бесплатные видеокурсы://–>

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

Вообще говоря, речь пойдёт сейчас об объекте Location, который является свойством объекта Document. У объекта Location есть свойство href, с помощью которого и реализуется редирект на JavaScript. Данное свойство доступно и для чтения, и для записи. Для начала давайте его прочитаем:

В результате Вы увидите полный адрес к Вашему скрипту.

Теперь сделаем простейший редирект на JavaScript:

Таким образом, все пользователи, которые запустят этот скрипт будут автоматически переходить на сайт: "http://myrusakov.ru".

Теперь давайте сделаем классическую задачу, которые реализуют очень часто. Допустим, у Вас был сайт: http://a.ru. Затем Вы купили новый домен для Вашего сайта и его адрес стал: http://b.ru. И хотите, чтобы все посетители переходили с http://a.ru на новый http://b.ru. Причём, Вы хотите, чтобы они знали, что у Вашего сайта новый адрес. Знакома ситуация? Так вот, реализуется это с помощью редиректа с задержкой:

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

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

Как видите, сложное слово редирект оказалось очень простым не только в понимании, но и в использовании. И реализация редиректа в JavaScript очень и очень простая.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Читайте также:  Mpeg 2 или 4

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 10 ):

    Подскажи пожалуйста! Умеет ли JavaScript выводить на странице СТРАНУ и РЕГИОН пользователя? Если да, то нужна ли для этого база данных? А как нащёт IP-адреса? Я вставил какую-то картинку со стороннего сайта (в виде щётчика) и она показывает IP. Как это работает? Спасибо.

    На чистом JS определить IP невозможно. Только лишь, например, через Ajax, который будет связываться с PHP-скриптом, определяющим IP и возвращающим его. Именно так и работают JS-счётчики.

    А почему вы не написали про window.location?

    А как сделать штоб послє первово сайта кидало на второй а патом єщо й на трєтій

    Поставить редиректы на всех этих сайтах.

    Спасибо! Познавательно! Для автоматического перехода с одной страницы на другую, также можно использовать тег meta (пишется в контейнер head), например,

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

    При использовании средств PHP происходит работа через функцию header, т.е. путём перегрузки заголовков. Но всё дело в том, что этот header(‘Location: url’), нужно отправить до вывода любой информациии в браузер (это правило для любого заголовка). Так вот когда структура сайта такова, что подключается масса файлов или же огромный код PHP в перемешку с HTML, то вызов header ведёт к тому, что просто на просто редирект не пашет. и это хорошо если у вас 1 такой файл.. а если 100? поэтому проще написать JS функцию и инклудить (или реквайрить) её в нужные страницы. При этом всё будет работать и путаницы с хедерами не будет.

    Всё это хорошо для частного случая. Но гораздо больший функционал всё-таки у спец скриптов типа Smart Redirector 3.0 Тиссена Сергея http://r.online-biznes.com/6

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Adblock detector