amsterdy
@amsterdy
developer of life

Динамическая подгрузка (jQuery, ajax): как работает вставка в HTML-документ?

Доброго времени суток.

Есть небольшая трудность: имеется сайт, где переходы по ссылкам работают по ajax (подгруженное содержимое должно вставляться в общий блок div#page). На сервере работает определение типа запроса: обычный или ajax. Если обычный - отдается все содержимое страницы, иначе только запрашиваемая часть конкретной страницы, которую нужно вставить в div#page (ответ от сервера без тегов head и body).

В целом, все работает, но если зайти на сайт и перейти на какую-нибудь страницу (подгруженную по ajax), а потом открыть "просмотреть код" на этой странице, то содержимое страницы будет аналогично полученному ответу по ajax (без тегов html, head, body).

Примеры:

Исходное содержимое страницы:
<!DOCTYPE html>
<head>
<title>Page</title>
</head>
<body>
<div id="page">
<div>Содержимое страницы</div>
</div>
</body>
</html>


Содержимое этой же страницы, но подгруженной через ajax (должно вставиться в div#page):
<div>Содержимое страницы - 2</div>

По логике ожидается такое поведение:
<!DOCTYPE html>
<head>
<title>Page</title>
</head>
<body>
<div id="page">
<div>Содержимое страницы - 2</div>
</div>
</body>
</html>


Соответственно, при нажатии в браузере по кнопке "назад", получаю только это:
<div>Содержимое страницы - 2</div>

JavaScript-функция, отвечающая за подгрузку и обновление:
link: function (b, event, args) {
		if (event) {
			event.preventDefault ();
		}

		var link = $(b).attr ('href');

		// меняем URL
		if(link != window.location) {
			window.history.pushState (null, null, link);
		}

		// отправляем
		$.ajax ({
			url: link,
			dataType: 'html',
			success: function (r) {

				var titleText = $(r).filter ('#title-text').html ();

				// замена <title>
				$('title').html (titleText);
				$('#mobile-title').html (titleText);

				// замена элементов
				$('#l-page').html (r);
			}
		});
	};


Кто с этим сталкивался, почему такое поведение и есть ли решение этой задачи? Благодарю.
  • Вопрос задан
  • 2162 просмотра
Решения вопроса 1
ArtamonovDenis
@ArtamonovDenis
Full-stack developer
Вероятнее всего, ajax-запрос пишется в историю навигации бразуера и поэтому запоминается результат последнего запроса
Примерное описание
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@IsaevDev
Не очень понятно что происходит)
Но погуглить нужно в сторону того, как делаются SPA приложения
Либо вам нужно отслеживать хэш страницы или как его, в общем site.ru/some/url#hash и по нему определять какую страницу отдавать
Либо через js менять адрес в адресной строке при переходе, чтобы при прямом заходе на страницу сервер знал что отдавать

Я бы уж тогда полностью делал на js - заходишь на страницу и js определяет какую страницу/часть подтянуть с сервера
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы