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