Удаление параметров URL без перезагрузки страницы: jQuery

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

Для того, чтобы удалить параметры из URL без перезагрузки страницы, можно использовать метод history.replaceState(), передав в него только pathname:

history.replaceState(null, '', location.pathname);

Данная команда эффективно очищает строку запроса, в результате чего в адресной строке останется только pathname.

Понимание инструментов: pushState и replaceState

Функция window.history.pushState() является ключевым элементом для изменения URL без перезагрузки страницы. Она позволяет обогатить URL различной информацией и корректировать историю браузера:

window.history.pushState({}, document.title, "/" + myNewURL);

Важно запомнить, что pushState добавляет новую запись в историю сессий браузера, в то время как window.history.replaceState() обновляет и перезаписывает текущее состояние, не создавая новых записей.

Выбор между pushState и replaceState

Используйте history.pushState(), когда нужно изменить URL, сохраняя при этом возможность навигации с помощью кнопки "назад":

// Создаём запись в истории сеанса!
history.pushState({ page: 1 }, 'Глава 1', '/ch1');

Метод history.replaceState() подходит для удаления конкретных параметров или очистки URL, при этом история навигации пользователя остаётся без изменений:

// Наступило время изменения
history.replaceState({ page: 2 }, 'Глава 2', '/ch2');

Обработка особенностей браузеров

Различные браузеры по-разному воспринимают pushState и replaceState. Например, Chrome примет пустую строку в качестве аргумента для pushState, тогда как Firefox может не принять:

// В Chrome всё хорошо, а Firefox может проигнорировать
window.history.pushState({}, document.title, '');

Проверяйте наличие API истории, чтобы избежать непредвиденных проблем:

if ('history' in window && 'pushState' in history) {
  // Готовы к изменениям!
}

Улучшение навыков работы с URL

Подробнее об этом расскажет наш спикер на видео

Точное удаление через URLSearchParams

Для удаления конкретных параметров используйте URLSearchParams как инструмент с высокой точностью:

let urlParams = new URLSearchParams(window.location.search);
urlParams.delete('unwantedParam');
window.history.replaceState(null, '', `${location.pathname}?${urlParams}`);

Полифил для поддержки старых браузеров

Если вам не нужна обратная совместимость с браузерами типа Internet Explorer, то всё же стоит обеспечить резервный вариант для вашего кода. Используйте полифил или хелпер для имитации URLSearchParams:

function removeParam(paramName) {
  let params = new URLSearchParams(location.search);
  params.delete(paramName);
  return params.toString();
}

Управление хэшами

Если вы работаете с хэшами, то при удалении параметров следует сохранить их стабильность:

let currentHash = window.location.hash;
history.replaceState(null, '', `${location.pathname}?${removeParam('myParam')}${currentHash}`);

Асинхронные действия с помощью jQuery

При работе с jQuery удаляйте параметры URL только после полной загрузки документа:

$(document).ready(function() {
  history.replaceState(null, '', location.pathname);
  // jQuery подключён. Параметры URL под контролем.
});

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

Представьте удаление параметров URL как поезд, который мы назовём "Экспресс в здравом смысле":

Отправление: 🚆🔗🎟️🔗📦🔗🏷️
# 🚆 – Наша цель (страница)
# 🔗 – Сопутствующие элементы (разделители и параметры)
# 🎟️ – Ненужный груз (например, ?user=123)
# 📦 и 🏷️ – Остальной груз (например, &page=2 и &sort=asc)

Удаление излишнего груза с помощью history.pushState:

Прибытие: 🚆🔗🎟️
# 🎟️ остаётся, а 📦 и 🏷️ остались позади!

Итог: лёгкая и приятная поездка, всё следует по плану!

Преодоление трудностей и устранение подводных камней

Проверьте наличие параметра

Перед удалением параметра убедитесь, что он действительно присутствует в URL:

if (urlParams.has('thirdWheel')) {
  // Пришло время поговорить: "Похоже, нам придётся расстаться, thirdWheel."
}

Надёжное управление состоянием

В объекте state методов pushState и replaceState можно хранить полезные данные. Обращайтесь к ним как к ценным ресурсам, чтобы не потерять важную информацию.

history.pushState({ page: 1 }, 'Название', '?page=1');
// Собираем информацию, как чемодан. Не упустите что-то важное!

Внимание к SEO

Частое изменение URL может влиять на позицию в поисковой оптимизации. Стремитесь к тому, чтобы адрес был удобен как для пользователей, так и для поисковых систем.

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

1. History API – Веб API | MDN — Обширное руководство по манипуляции историей браузера.
2. Обновление адресной строки без хеша или перезагрузки страницы – Stack Overflow — Обсуждение о том, как обновлять URL без полной перезагрузки страницы.
3. History: метод pushState() – Веб API | MDN — Подробное описание метода pushState() и его использования для изменения URL.
4. Использование HTML5 History API | CSS-Tricks — Руководство по работе с History API, примеры и советы по использованию.
5. Поддержка браузером History API | Can I use — Информация о совместимости API истории в различных браузерах.
6. Как получить параметры URL с помощью JavaScript — SitePoint — Урок по извлечению параметров URL в JavaScript.