Статьи по JavaScript

Redirect Javascript: перенаправление страницы на стороне клиента

Благодаря Javascript можно манипулировать передвижением пользователя с помощью перенаправлений или обновления страницы.

Для осуществления редиректа на самом деле существуют более совершенные системы, основанные на серверных языках, таких как PHP или ASP, благодаря которым можно установить, помимо его, такой статус, как, например, 301 Moved Permanently, что невозможно при использовании Javascript .

Однако, когда нет возможности работать на стороне сервера, использование Javascript является лучшим решением.

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

Создание редиректа в Javascript

Для создания редиректа с помощью Javascript нам нужно обратиться к объекту location (который является частью объекта window) и свойству href, которое произвольно устанавливается на новый URL, на который должен быть перенаправлен пользователь:

<script> window.location.href = '/new-page.html'; </script>
Code language: HTML, XML (xml)

или:

<script> location.href = '/new-page.html'; </script>
Code language: HTML, XML (xml)

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

В качестве альтернативы свойству href можно использовать метод replace():

<script> window.location.replace('/new-page.html'); </script>
Code language: HTML, XML (xml)

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

Редирект при загрузке страницы

Иногда перенаправление запускается при загрузке веб-страницы.

Для этого наиболее часто используемая техника заключается в запуске редиректе в событии загрузки, связанном с тегом :

<body onload="window.location.href = '/new-page.html';">
Code language: HTML, XML (xml)

Переадресация с таймером в Javascript

Очень часто перенаправление с помощью javascript выполняется по таймеру, то есть по истечении всего нескольких секунд после загрузки страницы. Для получения такого же результата придется написать еще несколько строк кода, обратившись к методу setTimeout():

<script> // Переадресация через 5 секунд setTimeout(function() { window.location.href = "/new-page.html"; }, 5000); </script>
Code language: HTML, XML (xml)

Переадресация только для мобильных устройств

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

Довольно распространенным случаем является перехват мобильных устройств с целью переадресации пользователя на оптимизированную страницу.

Для этого существует два различных метода: первый (более эмпирический) предполагает выполнение перенаправления, когда ширина экрана меньше X, а второй основан на оценке агента пользователя. Давайте посмотрим и то, и другое:

<script> // Редирект для маленьких экранов if (screen.width <= 699) { document.location = "page-optimized-for-mobile.html"; } </script>
Code language: HTML, XML (xml)
<script> // Редирект для устройств Apple и Android if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i) || (navigator.userAgent.match(/Android/i))) { document.location = "page-optimized-for-mobile.html"; } </script>
Code language: HTML, XML (xml)

Редирект с помощью jQuery

В заключение я хотел бы отметить, что редирект также можно запустить с помощью jQuery, например, так:

<script> $(location).attr('href','/new-page.html'); </script>
Code language: HTML, XML (xml)

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

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