Доброго времени суток.
Есть небольшая трудность: имеется сайт, где переходы по ссылкам работают по 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);
}
});
};
Кто с этим сталкивался, почему такое поведение и есть ли решение этой задачи? Благодарю.
