Как сделать редирект в javascript

How to redirect to another web page using JavaScript

Using JavaScript, you can run some code immediately upon page load that will send a user to another page (i.e. redirect the user).

Table of contents

Redirecting

For immediate directing, it is best to use the following code:

window.location.replace('https://example.com');

This fully replaces the URL from which the code is run in the browser history.

The advantage of this is that if a user goes back in their browser after the redirect, they will reach the page they were browsing before the redirect.

If you use window.location.href(‘https://example.com’) , it will also redirect the user. But if a user wants to then go back in the browser, they will access the redirecting page, and this will immediately redirect the user again.

Creating a redirection countdown

You’ve probably seen countdowns before being redirected on web pages before.

To create your own, create your redirect text, adding empty elements for both the redirect URL and countdown value within this text.

Then, select these elements in JavaScript.

In your script, you are going to want to create a recurring update to the countdown value using setInterval() and a delayed redirect using setTimeout() . The delay should be the countdown value multiplied by 1000 milliseconds.

Summary

By accessing location.replace() on the global window object and passing in a URL, you can redirect a user to another page without the redirect page being saved in the user’s browser history.

Related links

Источник

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)

Источник

Как сделать редирект в javascript

Внутрь него помещаем window.location + адрес куда будем переадресовывать пользователя:

Пример переадресации javascript №1.

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

Выведем данный код переадресации в javascript

Для проверки работы переадресации нажмите на кнопку «Сделай переадресацию в javascript»
Сделай переадресацию в javascript

Вариант №2 переадресация в javascript

Теория и код из первого пункта.

Код переадресации в javascript

Пример переадресации №2 в javascript

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

Реализация примера переадресации №2 в javascript

Для того, чтобы произошла переадресации №2 в javascript нажмите кнопку «Сделай переадресацию в javascript»
Сделай переадресацию в javascript

Переадресация javascript вариант №3.

Для того, чтобы сделать переадресацию в javascript вам понадобится:

Пример переадресации №3 в javascript

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

Живой пример переадресации в javascript

Для того, чтобы произошла переадресации №3 в javascript нажмите кнопку «Сделай переадресацию в javascript»
Сделай переадресацию в javascript

Переадресация javascript вариант №4.

На четвертую переадресацию вы должны были выучить, что вам потребуется:

Пример переадресации №4 в javascript

И не буду повторять почему здесь данныя кнопка — button + onclick

Источник