Javascript переадресация: Переадресация веб-страниц с помощью JavaScript

Переадресация ⚡️ Node.js с примерами кода

Для переадресации применяется метод redirect():

redirect([status,] path)

В качестве параметра path передается путь, на который будет перенаправляться пользователь. Дополнительный параметр status задает статусный код переадресации. Если этот параметр не задан, тогда по умолчанию отправляется статусный код 302, который предполагает временную переадресацию.

С помощью данного метода можно выполнять переадресацию как по относительным путям, так и по абсолютным, в том числе на другие домены.

Переадресация по абсолютному пути:

const express = require('express')
const app = express()
app.use('/index', function (request, response) {
  response.redirect('https://xsltdev.ru')
})
app.listen(3000)

В данном случае при обращении по пути /index будет идти переадресация на сайт https://xsltdev.ru.

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

const express = require('express')
const app = express()
app.use('/home', function (request, response) {
  response.redirect('about')
})
app.use('/about', function (request, response) {
  response.send('<h2>About</h2>')
})
app.listen(3000)

В данном случае будет идти перенаправление с ресурса /home на ресурс /about, то есть, условно говоря, с http://localhost:3000/home на http://localhost:3000/about.

Теперь рассмотрим похожий пример:

const express = require('express')
const app = express()
app.use('/home/bar', function (request, response) {
  response.redirect('about')
})
app.use('/home/about', function (request, response) {
  response.send('<h2>About</h2>')
})
app.listen(3000)

Здесь с ресурса /home/bar также идет переадресация на ресурс about, однако в реальности теперь это будет не http://localhost:3000/about, а http://localhost:3000/home/about. То есть мы как-бы поднимаемся на один уровень вверх — с home/bar на home/ и затем к нему добавляется

Если нам необходимо выполнить переадресацию не относительно текущего ресурса, а относительно корневого каталога приложения, то в начале адреса ставится слеш:

const express = require('express')
const app = express()
app.use('/home/bar', function (request, response) {
  response.redirect('/about')
})
app.use('/about', function (request, response) {
  response.send('<h2>About</h2>')
})
app.listen(3000)

Еще несколько примеров. Переадресация относительно текущего адреса на адрес на том же уровне:

app.use('/home/foo/bar', function (request, response) {
  response.redirect('./about')
})

Здесь идет переадресация с

Переадресация на адрес, который располагается уровнем выше:

app.use('/home/foo/bar', function (request, response) {
  response. redirect('../about')
})

Здесь идет переадресация с http://localhost:3000/home/foo/bar на http://localhost:3000/home/about

Переадресация на уровень выше:

app.use('/home/foo/bar', function (request, response) {
  response.redirect('.')
})

Здесь идет переадресация с

Переадресация на два уровня выше:

app.use('/home/foo/bar', function (request, response) {
  response.redirect('..')
})

Здесь идет переадресация с http://localhost:3000/home/foo/bar на http://localhost:3000/home

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

response.redirect(301, '/about')

Перенаправления в HTTP — HTTP

URL перенаправление (redirecting), также известное как URL пересылка (forwarding), это метод представления страницы, формы или целого веб-приложения, более чем одним URL адресом.

В HTTP, перенаправление вызывается при отправке сервером специального ответа на запрос: redirects. HTTP перенаправление, это ответы с кодом статуса 3xx

Есть несколько типов перенаправлений и делятся на три категории: постоянные, временные и специальные перенаправления.

Постоянные перенаправления

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

[1] Спецификация не была намерена разрешать изменение метода, но на практике, клиентские приложения делают это. Код

Временные перенаправления

Иногда, доступ к запрашиваемому ресурсу не может быть предоставлен из определённого места, но может быть предоставлен из другого. В этом случае, могут быть использованы временные перенаправления. Поисковые роботы не запоминают новую, временную ссылку. Временные перенаправления также используются, когда создаются, обновляются, или удаляются ресурсы, которые представляют временные страницы.

Код	Текст	Обработка метода	Случаи использования
302	Found	GET методы неизменны. Другие методы могут быть превращены в GET.[2]	Веб-страница недоступна по непредвиденным причинам. В этом случае поисковые роботы не будут обновлять свои ссылки.
303	See Other	GET методы неизменны. Другие превращены в GET (тело запроса теряется).	Используется для перенаправления после PUT или POST для предотвращения обновления страницы, что может спровоцировать повторный вызов операции.
307	Temporary Redirect	Метод и тело запроса неизменны.	Веб-страница недоступна по непредвиденным причинам. В этом случае поисковые роботы не будут обновлять свои ссылки. Лучше чем код 302 когда не-GET ссылки/операции доступны на сайте.

[2] Спецификация не была намерена разрешать изменение метода, но на практике, клиентские приложения делают это. Код

Специальные перенаправления

В добавок к обычным перенаправлениям, есть 2 специальные. Перенаправление с кодом 304 (Not Modified) перенаправляет страницу к локальной закешированной копии (которая была устаревшей), и перенаправление с кодом 300 (Multiple Choice) это ручное перенаправление: тело, представленное браузером, как веб-страница, перечисляет возможные перенаправления и пользователь выбирает одно из них.

HTTP перенаправления это не единственный способ переадресации. Есть ещё два метода: HTML перенаправления используют элемент <meta> , и JavaScript перенаправления используют DOM.

HTML перенаправления

HTTP перенаправления более предпочтительный способ создания перенаправлений, но, иногда, у веб-разработчиков нету контроля над сервером или возможности настроить его. Для таких особых случаев, разработчики могут создать HTML страницу с элементом <meta> и установить атрибуту http-equiv значение refresh в блоке <head>. Когда страница отображается, браузер найдёт этот элемент и перейдёт на указанную страницу.

<head>
  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
</head>

Атрибут content начинается с числа, которое означает, сколько секунд браузер должен ждать, прежде чем перейти по данной ссылке. Всегда устанавливайте 0, для лучшей доступности.

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

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

JavaScript перенаправления

Перенаправления в JavaScript создаются установкой значения свойства window.location и новая страница загрузиться.

window.location = "http://www.example.com/";

Как и HTML перенаправления, этот тип не будет работать на всех ресурсах, и очевидно, что работает только на стороне клиента, который выполнит JavaScript. С другой стороны, вы можете вызвать перенаправление, только тогда, когда исполнится определённое условие.

Приоритетность

При использовании трёх возможных способов URL перенаправления, некоторые методы могут быть вызваны одновременно, но какой из них будет примёнён первым? Порядок приоритетов следующий:

1. HTTP перенаправления всегда выполняются первыми, пока ещё страница даже не была передана, и конечно же, пока ещё не прочитана.
2. HTML перенаправления (<meta>) выполняются только, если перенаправление не было в выполнено в HTTP.
3. JavaScript перенаправления используются как последняя возможность перенаправления, и работают только если разрешено выполнение JavaScript на клиентской стороне.

Используйте HTTP перенаправления, когда это возможно, и не используйте элемент <meta>. Если разработчик изменяет HTTP перенаправление и забывает изменить HTML перенаправление , тогда они больше не идентичны, и закончится это вечным циклом или другим ночным кошмаром.

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

Связывание доменов

В идеале, есть только одно место, и следовательно один URL адрес, для одного ресурса. Но, есть несколько причин, чтобы иметь альтернативные имена для ресурса (несколько доменов, как с, так и без префикса www или более короткие и лёгкие для запоминания адреса, …). В этих случаях, использовать перенаправление к одному истинному URL адресу, более подходящий вариант, чем дублировать ресурс.

Связывание доменов может быть необходимым по нескольким причинам:

• Расширение вашего сайта. Распространённый случай, когда ваш сайт находится под доменом www.example.com , а доступ к страницам должен быть возможным также из example.com . В этом случае создаются перенаправления для страниц из example.com к страницам www.example.com. Вы также можете предоставлять обычно используемые имена синонимов или частые опечатки ваших доменных имён.
• Переезд на другой домен. К примеру, ваша компания была переименована и вы хотите чтобы люди которые обычно использовали старый сайт компании находили вас под новым именем.
• Принуждённый HTTPS. Запросы к HTTP версии вашего сайта буду перенаправлены к HTTPS версии.

Сохранения ссылок рабочими

Когда вы изменяете структуру веб-сайта, URL адреса ресурсов меняются. Даже, если вы можете обновить внутренние ссылки вашего сайта в соответствии с новой схемой имён, у вас нет контроля на URL адресами используемыми внешними ресурсами. Вы не хотите, чтобы эти ссылки не работали, так как они приносят вам ценных пользователей (и помогают вашей SEO), так что вы устанавливаете перенаправления из старых URL адресов на новые.

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

Временные ответы для небезопасных запросов

Небезопасные запросы изменяют состояние сервера и пользователь не должен не нарочно запросить их. Обычно, вы не хотите чтобы ваши пользователи повторно отправляли PUT, POST или DELETE запросы. Если вы только обслуживаете запросы, простое нажатие кнопки перезагрузки повторно отправит запрос.

В этом случае, сервер вернёт ответ 303 (Смотреть другие), который будет содержать правильную информацию, но если кнопка перезагрузки будет нажата, эта страница просто отобразится повторно без ответа на небезопасный запрос.

Временные ответы на долгие запросы

Некоторые запросы могут потребовать больше времени сервера, например запрос DELETE, который срабатывает по расписанию. В этом случае, ответом будет перенаправление 303 (Смотреть другие), которое связывает со страницей показывающей, что действие было запланировано, и в результате информирует о процессе или позволяет отменить запрос. /images/(.*)$ http://images.example.com/$1 permanent;

IIS

В IIS, вы используете элемент <httpRedirect> для настройки перенаправлений.

Циклы перенаправлений случаются когда за успешным перенаправлением следует другое, которое уже было выполнено. Другими словами, существует такой цикл, который никогда не закончится и в конечном счёте ни одна страница не будет найдена.

В большинстве случаев это проблема сервера, и если сервер не может обнаружить её, то отправит код статуса 500 Internal Server Error. Если вы встретите такую ошибку вскоре после редактирования настроек сервера, то это скорее всего цикл перенаправлений.

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

Firefox has detected that the server is redirecting the request for this address in a way that will never complete. 

тогда, как Chrome:

This Webpage has a redirect loop

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

Важно избегать циклов перенаправлений, так как они полностью нарушают работу пользователя.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Как перенаправить на другую веб-страницу с помощью JavaScript?

Улучшить статью

Сохранить статью

• Последнее обновление: 17 ноя, 2021

Улучшить статью

Сохранить статью

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

Существует несколько способов перенаправления на другую веб-страницу с помощью JavaScript. Некоторые из них перечислены ниже:

• location.href : Используется для установки или возврата полного URL-адреса текущей страницы.
• location.replace() : Используется для замены текущего документа указанным.
• location.assign() : Используется для загрузки нового документа.

Синтаксис:

 location.href="  URL  "
      или
location.replace (« URL-адрес »)
      или
location.assign("  URL  ") 

Параметры: Он принимает один параметр URL , который требуется. Он используется для указания ссылки на новую веб-страницу.

Возвращаемое значение: Не возвращает значение.

9002 1: Этот пример иллюстрирует использование Location. href .>

< body >

     < h3 >Welcome to GeeksforGeeks h3 >

     < p >Это пример < i >location.href i > пути. р >

     < button onclick = "myFunc()" >Click me button >

< Сценарий >

Функция myfunc () {

}

}

}

}

}

0079      script >

body >

html >

Output:

location. href Свойство

Пример 2: Это пример метода location.replace() .

HTML

Вывод:

location. replace

Пример 3: Location.assign() 902Метод 0027.

HTML

Выход:

. Метод .replace() удаляет URL-адрес текущего документа из истории документа. Таким образом, хорошо использовать метод location.assign() , если вы хотите вернуться к исходному документу.

 window.location = 'https://newurl.com' 

 window.location.pathname = '/new' 

 window.location.assign('https://newurl.com') 

 window.location.replace('https://newurl.com') 

 self.location = 'https ://newurl.com'
top.location = 'https://newurl.com'