Блог

Главная - Вопросы по программированию - Javascript: как изменить путь в URL-адресе

Javascript: как изменить путь в URL-адресе

#javascript #url

#javascript #url

Вопрос:

У меня есть страница с бесконечной прокруткой с помощью ajax. При получении следующего набора данных мне нужно изменить путь в URL-адресе без перезагрузки страницы через javascript.

Учитывая URL-адрес https://example.com/products/page/2 .

Мне нужно изменить этот URL на https://example.com/products/page/3 когда следующий набор объектов выбирается при прокрутке.

Я знаю, что параметры поиска могут быть изменены таким образом с помощью этого кода

 var url = new URL(location.href);
url.searchParams.set('page', '2');
url.search = url.searchParams.toString();
var new_url = url.toString(); 
window.history.pushState('page2', 'Title', new_url);

Я хотел знать, как сделать то же самое с именем пути, а не с параметрами поиска. Как это можно сделать?

Ответ №1:

Вы можете получить доступ pathname к URL-адресу и использовать манипуляции со строками для изменения конечной точки.

 const url = new URL("https://example.com/products/page/3");
console.log(url.pathname);
// '/products/page/3'

Свойство pathname интерфейса URL-адреса представляет собой USVString, содержащую начальный ‘/’, за которым следует путь к URL-адресу (или пустая строка, если пути нет).

 const loc = "https://example.com/products/page/3";

const url = new URL(loc);

const pathnameArray = url.pathname.split('/');
pathnameArray[pathnameArray.length - 1] = parseInt(pathnameArray[pathnameArray.length - 1]) 1;
url.pathname = pathnameArray.join('/');

console.log(url);

Комментарии:

1. Установка пути url таким образом url.pathname = xyz; не обновляет URL. Мне просто нужно, как задать путь и отразить его в браузере без перезагрузки страницы.

2. Он изменяет URL-адрес, на который ссылается url , если вы хотите, чтобы изменения отражались в браузере, вам необходимо обновить местоположение с помощью location.replace(url) или location.assign(url)

3. Когда я использую location.replace(url) или location.assign(url), страница обновляется. Я этого не хочу. Я хочу, чтобы он работал как url.searchParams.set(‘страница’, ‘2’);

4. Как указано в фрагменте url.pathname = '/updated/pathname' , изменяет .pathname значение для URL ссылки на объект url так же, как url.searchParams.set() изменяет .search значение для этого объекта. Конечно, замена или назначение местоположения новым URL-адресом приведет к перезагрузке страницы (это было бы так, если бы вы заменили его URL-адресом, измененным .searchParams.set также.)

5. Нет. Изменение параметров поиска с помощью метода .set не перезагружает страницу. Я предполагаю, что невозможно изменить путь без перезагрузки страницы