Работа с URL

Dom7 — это легковесная библиотека для работы с DOM в JavaScript, часто используемая вместе с фреймворком Framework7. Она предоставляет удобные методы для работы с элементами, событиями, классами, атрибутами и другими аспектами веб-страницы. Одной из менее очевидных, но полезных возможностей является работа с URL, их чтение, анализ и динамическое изменение с помощью методов Dom7.

Получение текущего URL

Для извлечения информации о текущем адресе страницы Dom7 использует стандартные свойства window.location. Например, чтобы получить полный URL страницы, можно использовать:

var currentUrl = window.location.href;

Также доступны отдельные части URL:

var protocol = window.location.protocol; // "http:" или "https:"
var host = window.location.host;         // "example.com:8080"
var hostname = window.location.hostname; // "example.com"
var port = window.location.port;         // "8080" или пустая строка
var pathname = window.location.pathname; // "/path/page.html"
var search = window.location.search;     // "?id=123&name=test"
var hash = window.location.hash;         // "#section1"

Эти свойства позволяют работать с любой частью адреса без необходимости вручную разбирать строку URL.

Разбор параметров запроса

Часто необходимо извлечь значения параметров из строки запроса. Dom7 напрямую не предоставляет отдельного метода для работы с GET-параметрами, но сочетание window.location.search и URLSearchParams позволяет реализовать это эффективно:

var queryParams = new URLSearchParams(window.location.search);

var id = queryParams.get('id');      // получаем значение параметра id
var name = queryParams.get('name');  // получаем значение параметра name

URLSearchParams поддерживает методы has, set, append и delete, что делает работу с параметрами гибкой:

if (!queryParams.has('lang')) {
  queryParams.append('lang', 'ru');
}

queryParams.set('id', '456'); // заменяет значение параметра id

Для преобразования параметров обратно в строку запроса можно использовать метод toString():

var newQueryString = queryParams.toString(); // "id=456&name=test&lang=ru"

Изменение URL без перезагрузки страницы

Dom7 позволяет использовать обычный JavaScript API history для изменения URL динамически, что полезно для SPA-приложений:

history.pushState({ page: 1 }, "Title", "/new-path?id=123");
history.replaceState({ page: 2 }, "Title", "/another-path");
  • pushState добавляет новую запись в историю браузера.
  • replaceState заменяет текущую запись без добавления новой.

Оба метода позволяют изменять pathname, search и hash без перезагрузки страницы, что важно для плавной навигации.

Работа с hash

Dom7 облегчает работу с фрагментами URL (hash), что часто используется для якорной навигации или состояния страниц:

var currentHash = window.location.hash; // "#section1"
window.location.hash = "section2";      // изменение hash

Для обработки изменений hash в реальном времени можно использовать событие hashchange:

$(window).on('hashchange', function() {
  var newHash = window.location.hash;
  console.log("Hash изменился на:", newHash);
});

Динамическое формирование URL

Создание URL для AJAX-запросов или переходов также удобно с использованием Dom7 в сочетании с URL:

var baseUrl = "https://example.com/api";
var url = new URL(baseUrl);
url.searchParams.append("id", 123);
url.searchParams.append("filter", "active");

console.log(url.toString()); // "https://example.com/api?id=123&filter=active"

URL автоматически кодирует специальные символы, что предотвращает ошибки при формировании адресов.

Практические советы

  • Использовать URLSearchParams для работы с GET-параметрами вместо ручного разбора строки.
  • Для SPA и мобильных приложений рекомендуется управлять состоянием через history.pushState и hash, минимизируя перезагрузки страниц.
  • Всегда кодировать динамически создаваемые части URL через encodeURIComponent, если используется ручная конкатенация.
  • Отслеживание hashchange позволяет реализовать навигацию по секциям страницы без сторонних библиотек.

Dom7 в сочетании со стандартными возможностями браузера делает работу с URL простой и гибкой, обеспечивая эффективное управление адресной строкой, параметрами запросов и фрагментами страниц. Это особенно важно при создании динамических интерфейсов и SPA, где точное управление URL обеспечивает корректное состояние приложения и удобство пользователя.

Оглавление