JavaScript: как перенаправить на другую веб-страницу

Вступление

Часто на сайте нужно перенаправлять пользователей на другой веб-сайт или другую веб-страницу. Существует несколько способов, как это сделать. С помощью JavaScript, сервера и мета-кода HTML.

Часто нам нужно перенаправлять по следующим причинам:

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

Всё это можно сделать с помощью объекта Location, который содержит информацию об URL-адресе. Есть несколько способов, как это сделать, поиграв с различными свойствами объекта Location. В этом уроке мы рассмотрим, как перенаправить пользователя на другую веб-страницу с помощью JavaScript и как минимизировать потенциальное негативное влияние SEO.

Свойство window.location

Объект window.location обозначает текущее местоположение, а точнее, URL-адрес окна или пользователя. Это свойство доступно только для чтения, однако мы можем управлять им, присваивая его свойствам новые значения (Domstring). windows в объекте windows.location можно опустить, поскольку он иерархически расположен в верхней части.

Перенаправляем пользователей с помощью location.href

Свойство location.href обозначает текущий URL-адрес в виде строки. Изменение свойства href автоматически приведет пользователя к новому значению href. Изменить свойство href так же просто, как и присвоить ему новое значение:

location.href = "https://uproger.com/";

Примечание: это то же самое, что и:

windows.location = "https://uproger.com";

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

Обычно перенаправление происходит после, например, нажатия кнопки, ведущей пользователя на другую веб-страницу. Или когда пользователь загружает изображение в социальную сеть и его куда-то перекидывает. Напишем простую функцию, которая перенаправляет пользователя одним нажатием кнопки:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Redirection</title>
    <script type = "text/javascript">
        function Redirect() {
         window.location.href = "https://uproger.com/";
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Redirect()"/>
</body>
</html>

Свойство href делает то же, что и щелчок мыши.

Перенаправляем пользователей с помощью location.assign()

Метод location.assign(url) загружает ресурс по указанному URL-адресу и отображает его в окне. На самом деле это лучший способ, как перенаправить пользователей, поскольку он также проверяет безопасность предоставленного URL-адреса, создавая исключение, если он не безопасен. Также он создаёт новую запись в истории браузера, позволяя пользователю вернуться “Назад”, если нужно.

Также стоит отметить, что location.assign() не разрешает перенаправление из одного источника в другой. Вы можете перенаправлять только на тот же домен, в котором был совершен вызов.

Кроме этого, его можно использовать во многом так же, как присвоение нового значения location.href. Давайте перепишем нашу страницу, используя функцию assign():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assigning</title>
    <script type = "text/javascript">
        function Assign() {
         window.location.assign("https://uproger.com/");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Assign()" />
</body>
</html>

Перенаправляем пользователей с помощью location.replace()

Метод replace(url) можно использовать для замены текущего ресурса в окне ресурсом, загруженным с URL-адреса. На самом деле он не перенаправляет пользователя и не сохраняется в истории браузера. Существуют те же ограничения безопасности, что и в методе assign(), что делает этот метод хорошим, если вы хотите заменить содержимое другой страницей:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Replacing</title>
    <script type = "text/javascript">
        function Replace() {
         window.location.Replace("https://uproger.com");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Replace()" />
</body>
</html>

Стоит отметить, что у метода assign() есть серьёзный недостаток. Если пользователь хочет вернуться на страницу, на которой запускается метод assign(), он будет перенаправлен обратно на страницу, с которой он пытался вернуться. Затем начнётся цикл возврата “назад” с помощью кнопки “Назад”, однако пользователь попадёт на другую страницу из-за метода assign().

Если вы используете функцию assign(), убедитесь, что она не вызывается автоматически на странице и что для ее вызова требуется действие пользователя, например, нажатие кнопки. Если нет – используйте location.replace().

Кроме того, location.replace() ближе всего к перенаправлению HTTP, так как исходная ссылка не добавляется в историю браузера.

Заключение

Мы научились перенаправлять на другую веб-страницу с помощью JavaScript

Ответить