Как сделать переход между страницами без перезагрузки?

Question

[Mr.Ivan]

Как сделать переход по страницам сайта без перезагрузки? Как примеру в "ВК" или "YouTube". Помогите пожалуйста!

Answer 1

[Егор Лаптев]

Почитай про SPA. Обычно подобные сервисы разрабатываются при помощи js библиотек Vue router, React router и т.п.

Answer 2

[zkrvndm]

Ниже пример функции для загрузки контента страниц по AJAX и без перезагрузки страницы:

async function pageUpdate(event) {
	
	// Если функция вызвана без аргументов:
	
	if (typeof event == 'undefined') {
		
		// Устанавливаем обработчики
		// на все ссылки на странице:
		
		$('body a[href]').click(pageUpdate);
		
	}
	
	// Если функция вызвана
	// в результате клика
	// по ссылке:
	
	else {
		
		// Берём адрес с нажатой ссылки
		// и записываем в переменную link:
		
		var link = event.target.href;
		
		// Если ссылка ведет на наш сайт:
		
		if (new URL(link)['host'] == location.host) {
			
			// Предотвращаем переход:
			
			event.preventDefault();
			
			// Блокируем страницу, чтобы
			// больше нельзя было кликать:
			$('body').css('pointer-events', 'none');
			
			// Активируем анимацию исчезновения (полупрозрачности):
			
			var hide = $('body').animate({ opacity: 0.2 }, 500).promise();
			
			var ajax = $.ajax(link); // Запускаем загрузку новой страницы
			
			await hide; // Ждем окончания анимации исчезновения
			
			// Вставляем данные на страницу беря их с ново-скачанной страницы:
			
			var doc = new DOMParser().parseFromString((await ajax), 'text/html');
			var html = $('body', doc).html();
			$('body').html(html);
			
			// Скролим в самый вверх:
			$('body, html').animate({scrollTop: 0}, 0);
			
			// Меняем адрес в адресной строке:
			history.pushState(null, null, link);
			
			// Заново ставим
			// обработчики:
			
			pageUpdate();
			
			// Активируем анимацию
			// постепенного появления:
			
			await $('body').animate({ opacity: 1 }, 500).promise();
			
			// Снимаем блокировку с документа:
			
			$('body').css('pointer-events', '');
			
		}
		
	}
	
}

pageUpdate();

Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.

Важно! Если на сайте есть какой-то сложный функционал, данный скрипт скорее-всего их сломает!