Как управлять загрузкой страницы?

Question

[Ян Соколов]

Приветствую всех, кто заглянул.

Есть небольшое приложение - чат, типа ВК или любого другого мессенджера, ну вы поняли.
Как я могу управлять перегрузкой страницы при изменении ссылки. Приведу пример.

Мы сейчас находимся в site.test/mail, затем нажимаем на кнопку для перехода в чат и ссылка меняется на site.test/mail/?act=show&id=123 просто через location.href=...

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

Вопрос: Как выключить эту перегрузку? Может у кого какие статьи по этому поводу есть хорошее

Comments

[nik8n]

про History API почитайте, там как раз все это и реализуемо
можно использовать history.pushState ( ) или history.replaceState ( )

[mirikkingg]

Напиши "middleware который будет "смотреть" за uri, после просто чисти через replaceState или через pushState
Че-нибудь такое:

const removeNewParamsMiddleware = () => {
  const searchParams = new URLSearchParams(window.location.search);
  let hasNewParams = false;

  // Проверяем наличие новых параметров в URL-адресе
  searchParams.forEach((value, key) => {
    if (key.startsWith('?')) { 
      hasNewParams = true;
    }
  });

  // Если есть новые параметры, удаляем их из URL-адреса
  if (hasNewParams) {
    const newSearchParams = new URLSearchParams(window.location.search);
    newSearchParams.forEach((value, key) => {
      if (key.startsWith('?')) {
        newSearchParams.delete(key);
      }
    });
    const newUrl = `${window.location.pathname}?${newSearchParams.toString()}`;
    window.history.pushState({}, '', newUrl);
  }
};
export default removeNewParamsMiddleware;

Потом вызови

import removeNewParamsMiddleware from './removeNewParamsMiddleware';

// Вызываем middleware при загрузке страницы
window.addEventListener('load', removeNewParamsMiddleware);

// Вызываем middleware при изменении URL-адреса
window.addEventListener('popstate', removeNewParamsMiddleware);

[Ян Соколов]

mirikkingg, Не понял правильно ли я понял.
У меня есть функция popstateEventListener() которая умеет обрабатывать url и открывать/закрывать то что нужно

Я после каждого history.pushState прописываю вызов этой ф-ции, а на сколько понял

window.addEventListener('popstate', popstateEventListener);

Должен меня от этого избавить, но почему-то не получается.

Вот кусочек который делает pushState:

$('#nav-btn-task, #main-page-footer-btn-task').on( "click", function() {
	history.pushState(null, null, '/task');
	// popstateEventListener();
});

[mirikkingg]

Ян Соколов, да. Только если будете использовать то что я выше написал, исправьте проверку на параметры.
Напишите, правильно ли работает, а то мб я в Вашей логике ошибся.

PS Listener на load тоже нужен, он будет отрабатывать при обновлении страницы в противном случае url не почистится при первой загрузки (редкий, но возможный кейс)

Answer 1

[Михаил Р.]

<button id="myButton">Перейти в чат</button>

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  history.pushState(null, null, '?act=show&id=123');
});

Как выключить эту перегрузку?

Давайте лучше перезагрузку, перегрузку мы всегда успеем организовать ;)

Comments

[Ян Соколов]

Получилось. Спасибо