Создание относительной ссылки на другой порт: решение без JS

Быстрый ответ

Для перенаправления на другой порт, без изменения текущего домена, используйте относительные URL протокола. Укажите в ссылке новый номер порта сразу после двух слэшей // и двоеточия. Пример такой ссылки:

<a href="//:8080/path">Перейти на порт 8080</a>

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

Манипулирование номером порта с использованием JavaScript

Для более гибкого управления сайтом иногда требуется изменять номер порта в реальном времени. Вот как это можно реализовать с помощью JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a.change-port');
  for (var link of links) {
    // Здесь происходит настоящее волшебство!
    link.addEventListener('click', function(event) {
      event.preventDefault();
      let newPort = 8080; // Выберите порт обдуманно!
      window.location.href = 
        window.location.protocol + '//' +
        window.location.hostname + ':' + 
        newPort + 
        this.getAttribute('href');
    });
  }
});

<a href="/path" class="change-port">Переход на порт 8080</a>

Здесь подготовленный скрипт перехватывает клики по подключённым ссылкам, блокирует их стандартное поведение и перенаправляет пользователя на заранее сформированный URL с другим номером порта.

Оптимизация пользовательского взаимодействия

При манипулировании URL с использованием JavaScript важно учесть следующие моменты, связанные с опытом пользователя:

1. Прозрачность изменений: Пользователи должны видеть модифицированный URL ещё до перехода по ней – пользовательский интерфейс должен отображать новую ссылку при наведении на неё курсором или попытке её скопировать.
2. Бесшовность переходов: Стоит организовать изменения так, чтобы они происходили максимально комфортно для пользователей, желательно – после полной загрузки страницы.
3. Совместимость: Убедитесь в корректной работе функции в различных браузерах, чтобы пользователи получали один и тот же опыт вне зависимости от выбранного ими инструмента для браузинга.

Навигация без излишнего использования скриптов

При формировании URL-адресов для обеспечения доступности сайта и комфортного пользовательского взаимодействия не стоит чрезмерно полагаться на JavaScript:

• Сразу после загрузки страницы: Ссылки желательно иметь корректными сразу после открытия страницы. JavaScript в этом случае является лишь дополнительным инструментом.
• Прогрессивное улучшение: Даже при отлючённом JavaScript или действии его ошибок, пользователи должны иметь возможность осуществлять навигацию, используя стандартные порты.

Визуализация

Представьте веб-страницу как дом (www.example.com), а пути внутри домена – как комнаты.

Ваша комната: www.example.com/livingRoom

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

Гостиная соседнего дома:
www.example.com:8080/livingRoom

Вот каким образом должна выглядеть ссылка на вашей веб-странице для данного "переезда":

<a href="//www.example.com:8080/livingRoom">Перейти в гостиную соседнего дома</a>

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

Доработка кода

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

1. Hover и динамическое изменение порта: Воспользуйтесь событием mouseover для динамического обновления атрибута href и визуализации измененного порта для пользователей.
2. Делегирование событий: Настройте обработчики событий для родительского элемента с целью уменьшения нагрузки и повышения производительности.
3. Абсолютные и относительные пути: Пусть функция сама определяет, абсолютный или относительный путь вы обрабатываете, и соответственно составляет URL.
4. Специальные символы: Кодируйте специальные символы в URL для предотвращения возможных проблем с передачей данных.

Полезные материалы

1. Что такое URL? – Обучение веб-разработке | MDN — ценный ресурс по основам работы с URL и различию между относительными и абсолютными адресами.
2. HTML-атрибут a href – W3Schools — обучающий портал с примерами использования href для создания гиперссылок в HTML.
3. Ссылки для добавления событий в Google Календарь – Stack Overflow — обсуждение стратегий создания ссылок для взаимодействия с внешними приложениями.
4. RFC 3986 – Uniform Resource Identifier (URI): Общая синтаксис — фундаментальный документ по синтаксису URI, который полезен для понимания структуры URL.
5. H30: Предоставление текста ссылки, описывающего цель ссылки для элементов якоря | WAI | W3C — методы создания доступного текста для гиперссылок, точно определяющего их функциональность.