JavaScript — популярный язык, и легко найти универсальные фрагменты, которые помогут его дополнить. Но его самый важный контекст — это веб-браузер, и вы можете многое сделать, чтобы улучшить свои веб-страницы с помощью всего лишь небольшого количества JavaScript.
Эти фрагменты предназначены для размещения на любом веб-сайте, независимо от его базовой структуры или фреймворка. Все они короткие — многие из них однострочные — и предлагают много отдачи за свои деньги.
1. Включите сочетание клавиш для перехода к поиску
Попробуйте открыть страницу результатов поиска Google и нажать клавишу /. Вы должны заметить, что поле поиска автоматически фокусируется, позволяя вам быстро ввести другой поиск. Эта комбинация клавиш настолько полезна, что многие другие сайты последовали ее примеру, от YouTube до MDN.
Вы можете получить тот же эффект на своем сайте с минимальными усилиями. Возьмите поисковую строку, которая выглядит примерно так:
С помощью всего лишь одной строки JavaScript вы можете добавить эту полезную комбинацию клавиш:
document.addEventListener(«keyup», функция (e) {
если (e.key === «/») {
document.getElementById(«поиск»).focus();
}
});
Прослушиватель событий проверяет наличие клавиши слеша. При нажатии он получает элемент поля поиска с помощью getElementById(), затем вызывает свой метод focus(), чтобы активировать поле поиска и поместить курсор внутрь него.
Обратите внимание, что при использовании этого конкретного кода действие фокусировки неразрушающее. Будьте осторожны, если вносите какие-либо изменения! Например, использование события keydown вместо keyup сфокусирует элемент до того, как браузер обработает нажатие клавиши, поэтому в поле поиска появится «/».
2 автоматических идентификатора фрагментов
Идентификаторы фрагментов — полезный способ ссылки на определенную точку на веб-странице. Если элемент имеет атрибут id со значением «example», то ссылка, заканчивающаяся на «#example», автоматически прокрутит страницу до этой точки.
Если вы публикуете контент в сети, использование атрибутов id побудит людей ссылаться на него. Может быть сложно не забыть включить id, но их динамическое внедрение решает эту проблему.
document.querySelectorAll(«h2»).forEach(function(el) {
if (!el.hasAttribute(«id»)) {
el.setAttribute(«id», el.textContent.replaceAll(/[^az]/gi, »);
}
});
Этот фрагмент проходит по каждому элементу h2 на вашей странице. Если у него еще нет атрибута id, код устанавливает его на основе текста внутри заголовка. Вы могли заметить, что это тот же самый метод, который сайты вроде Wikipedia используют для идентификаторов заголовков.
Обратите внимание на замену регулярного выражения, которая удаляет все символы, которые не являются буквами (az). Если вы публикуете на языке, отличном от английского, или используете заголовки, которые могут повторяться, вам следует рассмотреть возможность настройки регулярного выражения.
3. Перепишите URL-адрес как канонический
Вам когда-нибудь приходилось иметь дело с URL-адресами, содержащими такие элементы, как ?utm_content=buffercf3b2&utm_medium=социальный or #:~:текст=поиск? Эти параметры могут быть добавлены аналитическими скриптами и поисковыми системами, даже если ваш сайт их не использует. Хотя они не должны беспокоить ваших посетителей, они могут затруднить отслеживание вашей собственной аналитики, и вы, вероятно, не хотите, чтобы люди использовали эти URL-адреса в каких-либо ссылках.
Вот небольшой фрагмент JavaScript, который поможет очистить ваши URL-адреса:
окно.история.заменитьСостояние(null, «»,
document.querySelector(«link[rel=canonical]»).getAttribute(«href»)
);
History API — это мощный способ управления историей браузера, включая текущую страницу. Он позволяет вам манипулировать URL, не вызывая обновления страницы.
В этом случае метод replaceState() выполняет работу. Обратите внимание, как мы вызываем его с ложными значениями для первых двух аргументов, потому что нас интересует только третий; он представляет собой URL-адрес замены.
В этом фрагменте предполагается, что в вашей разметке уже есть канонический элемент URL, например:
Хорошая идея — включить каноническую ссылку, поскольку поисковые системы обычно используют ее для формулирования своих результатов. Если вы не всегда ее используете, убедитесь, что добавили условную проверку к этому фрагменту.
4. Открывайте внешние ссылки в новой вкладке
Есть несколько способов открыть ссылку в новой вкладке браузера. Однако как издатель вы можете захотеть это сделать. В частности, рекомендуется открывать ресурсы, такие как PDF-файлы, в отдельной вкладке, поскольку их контекст сильно отличается от контекста обычных веб-страниц.
Вы можете даже пойти так далеко, чтобы открыть все внешние ссылки в отдельной вкладке. Лучший способ сделать это — отредактировать HTML и добавить атрибут target:
Пример ссылки, которая откроется в новой вкладке
Однако, если вы этого еще не сделали, это может потребовать много работы. Рассмотрим следующий подход, который преобразует ссылки динамически с помощью JavaScript:
document.querySelectorAll(«a»).forEach(function(node) {
var url = новый URL(node.getAttribute(«href»), window.location);
если (окно.расположение.источник != url.источник) {
node.setAttribute(«целевой», «_blank»);
}
});
Этот код сравнивает window.location.origin — домен вашего веб-сайта — с url.origin, который является доменом каждой ссылки. Это означает, что подход будет работать, даже если вы используете полные абсолютные URL-адреса при ссылке на свой собственный сайт.
Большим преимуществом здесь является то, что вы можете быстро обновить все ссылки, если вы когда-нибудь решите изменить это поведение. Например, вы можете удалить условие и сделать так, чтобы все ссылки открывались в новой вкладке. Или вы можете вообще удалить этот код и оставить все ссылки в той же вкладке.
5 Плавное переключение ссылок
Одной из самых удобных клавиатурных комбинаций при просмотре веб-страниц является клавиша Tab. Нажмите ее, и вы перейдете к следующей ссылке на странице. Удерживайте клавишу Shift, и вы перейдете к предыдущей ссылке. С этой простой системой навигация по страницам с помощью клавиатуры становится намного проще.
Однако есть и недостаток: мгновенный переход на другую часть страницы может раздражать и вызывать чувство дезориентации, особенно когда ссылки находятся далеко друг от друга, на нескольких экранах. Этот фрагмент помогает, сглаживая этот опыт.
document.addEventListener(«keyup», функция (e) {
если (e.which === 9) {
e.target.scrollIntoView({
поведение: «гладкое»,
блок: «центр»,
});
}
});
Этот обработчик событий запускается при отпускании клавиши, проверяя , которые свойство события для проверки клавиши Tab. В этот момент браузер уже переместит фокус на следующую ссылку, поэтому e.target будет представлять ссылку, по которой только что перешел пользователь.
Метод scrollIntoView затем делает всю работу. Параметры обеспечивают прокрутку ссылок в вертикальное центральное положение с плавной анимацией.
6 Прокрутка страницы Прогресс
Поскольку браузеры и операционные системы сделали полосы прокрутки менее заметными, некоторые сайты взяли эту ношу на себя. Индикатор выполнения, показывающий, насколько далеко вы прокрутили страницу, теперь стал привычным зрелищем. Требуется немного поработать, чтобы добавить его на любую страницу, но не так уж много:
пусть p = document.body.appendChild(
document.createElement(«прогресс»),
),
де = document.documentElement;
p.setAttribute(«значение», «0»);
p.setAttribute(
«стиль»,
«позиция: фиксированная; сверху: 10 пикселей; слева: 10 пикселей; справа: 10 пикселей; ширина: авто;»,
);
document.addEventListener(«прокрутка», функция () {
p.value = de.scrollTop / (de.scrollHeight — de.clientHeight);
});
Большая часть работы здесь заключается в настройке элемента индикатора выполнения, который выглядит следующим образом:
<прогресс
значение =»0″
style=»position: fixed; top: 10px; left: 10px; right: 10px; width: auto;»
>
Этот стиль гарантирует, что индикатор выполнения всегда виден в верхней части окна. Остальная часть скрипта обрабатывает событие прокрутки документа и устанавливает значение прогресса между 0 и 1, что является диапазоном по умолчанию. Свойства scrollTop, scrollHeight и clientHeight измеряют положение прокрутки, общую высоту и видимую высоту соответственно.
