JavaScript — один из самых популярных языков программирования, и универсальные фрагменты кода для него найти легко. Но настоящая сила JavaScript раскрывается в браузере — с его помощью можно без лишних усилий значительно улучшить работу веб-страниц.
Представленные ниже сниппеты подойдут для любого сайта, независимо от используемых фреймворков или структуры. Большинство из них очень компактные — часто это всего одна строка кода, зато эффект от них заметен сразу.
1 Быстрый переход в строку поиска с помощью клавиатуры
Откройте страницу результатов поиска Google и нажмите клавишу /. Вы заметите, что курсор автоматически перемещается в поле поиска — так можно мгновенно начать новый запрос. Эта удобная фишка стала настолько популярной, что её подхватили YouTube, MDN и многие другие сайты.
На своём сайте вы можете сделать то же с минимальными усилиями. Допустим, у вас есть такое поле поиска:
Просто добавьте одну строку JavaScript, чтобы включить эту горячую клавишу:
Обработчик событий отслеживает нажатие клавиши "/", затем ищет элемент поисковой строки через getElementById() и вызывает у него метод focus(), чтобы поставить курсор прямо в поле.
Как я стал мастером Google Chrome благодаря этим сочетаниям клавиш
Попробуйте эти сочетания в Chrome — и клавиатурная навигация станет вашей страстью навсегда.
Важно: в этом коде активация поля поиска не мешает вводу символа "/". Будьте внимательны, если решите изменить логику! Например, при использовании события keydown курсор появится раньше обработчика, и в поле может случайно появиться нежелательный символ "/".
2 Автоматическая генерация якорей для заголовков
Фрагменты URL позволяют перейти к определённому разделу страницы. Если у элемента есть атрибут id со значением "example", ссылка с #example автоматически прокрутит страницу к нужному месту.
При публикации контента в интернете использование id подталкивает пользователей делиться прямыми ссылками на определённые части текста. Однако вручную добавлять id ко всем заголовкам неудобно — этот код решит эту задачу автоматически.
Сниппет перебирает все заголовки h2 на странице. Если у заголовка нет id, он создаётся на основе текста внутри заголовка. Такой подход часто используют, например, в Википедии.
В скрипте применяется регулярное выражение, которое удаляет все символы, кроме латинских букв (a-z). Если вы публикуете тексты на другом языке или ожидаете повторяющиеся заголовки, стоит подкорректировать регулярное выражение под ваши нужды.
Как на самом деле работает RegEx?
Регулярные выражения — мощный инструмент для поиска, замены и валидации шаблонов в тексте на разных языках программирования.
3 Автоматическая замена URL на канонический
Наверняка вы не раз сталкивались с URL, в которых куча параметров вроде ?utm_content=buffercf3b2&utm_medium=social или #:~:text=search. Их добавляют сервисы аналитики и поисковики, даже если вы их не используете. Для посетителей такие параметры не мешают, но усложняют сбор статистики и излишни в ссылках, которыми делятся пользователи.
Что такое URL (Uniform Resource Locator)?
При вводе адреса в браузере происходит множество процессов за кулисами.
Вот небольшой JavaScript-скрипт, который поможет упростить URL в браузере:
History API — это мощный инструмент управления историей браузера и текущим URL без перезагрузки страницы.
В примере метод replaceState() меняет текущий URL на адрес из тега canonical, при этом остальные параметры остаются без изменений. Первые два аргумента метода не важны, главное — третий, задающий новый URL.
В коде предполагается, что на странице уже есть тег canonical такого вида:
Указывать канонический тег полезно, потому что поисковики ориентируются на него при ранжировании. Если вы не всегда используете такой тег, добавьте проверку в скрипт.
4 Открываем внешние ссылки в новой вкладке
Существует несколько способов открыть ссылку в новой вкладке браузера. Как создатель сайта, вы можете настроить, чтобы определённые ссылки всегда открывались в новых вкладках. Особенно это полезно для ресурсов, таких как PDF-файлы — у них поведение отличается от обычных страниц.
Можно настроить так, чтобы все внешние ссылки открывались в новых вкладках, добавляя атрибут target прямо в HTML:
Если править HTML вручную слишком долго, это можно сделать динамически с помощью JavaScript:
Скрипт сравнивает домен текущего сайта (window.location.origin) с доменом каждой ссылки (url.origin). За счёт этого метод работает и с абсолютными ссылками.
Главное преимущество — вы легко можете менять логику открытия ссылок, просто меняя этот фрагмент кода. Например, убрать условие и открыть все ссылки в новых вкладках или наоборот — полностью отключить динамическую обработку.
5 Плавное переключение по ссылкам с клавиатуры
Одна из самых удобных функций при навигации по сайту — клавиша Tab. Она переводит курсор на следующий линк, а вместе с Shift — на предыдущий. Это значительно облегчает работу с клавиатурой.
Однако мгновенный переход порой бывает резким и сбивает с толку, особенно если ссылки расположены далеко друг от друга.
Этот сниппет сглаживает прокрутку страницы при переключении. Обработчик срабатывает при отпускании клавиши, проверяет, нажата ли Tab, а затем метод scrollIntoView плавно прокручивает страницу так, чтобы ссылка оказалась в центре экрана.
6 Индикатор прогресса прокрутки страницы
В последние годы браузеры и операционные системы сделали полосы прокрутки менее заметными, и многие сайты начали сами показывать индикатор прогресса — полоску, которая показывает, насколько далеко вы продвинулись по странице.
Добавить такой элемент совсем несложно, вот базовый код для прогресс-бара:
Главное — правильно настроить саму полосу прогресса, закрепив её вверху окна:
Остальная часть скрипта следит за событием прокрутки и вычисляет прогресс от 0 до 1. Для этого используются свойства scrollTop, scrollHeight и clientHeight, которые показывают текущую позицию, общую высоту документа и высоту видимой области соответственно.
Как всегда показывать полосы прокрутки в Windows 11
Решать, показывать ли или скрывать полосу прокрутки — вопрос личных предпочтений.
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Вы также можете найти наши материалы в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru