Как сделать загрузку новой страницы без старых блоков?

Question

[Ingernirated]

Добрый день, подскажите
Есть шапка и подвал сайта, на всех страницах он одинаков, как сделать так, чтобы пользователь переходя по страницам не загружал эти два блока снова, а лишь меняющийся контент, но при этом ссылка на эту страницу менялась?

Answer 1

[Alexander Pushkarev]

Взять какой-нибудь JS фреймворк. Например Vue и настроить на нём router.
Можно конечно через jQuery, но это будет очень уж костыльно. URL можно через history.pushState менять

Comments

[Ingernirated]

чем vue router отличается от обычного xmlhttpreq?

[Андрей Павленко]

Ingernirated: в расширяемости. Скажем так, рано или поздно придется писать слишком много кода, который трудно поддерживать и тестировать. JS-фреймворки облегчают разработку больших сайтов, сильно замешанных на переключение страниц без полной перезагрузки.
Вы можете посмотреть PJAX, как я вам посоветовал, но если сайт с перспективой разрастаться и усложняться - изучите Vue или React

Answer 2

[Андрей Буров]

Грузите с помощью ajax, а адресную строку меняйте с помощью history.pushState

Comments

[Ingernirated]

подскажи, что значит origin null?

cannot be created in a document with origin 'null' and URL

[Андрей Буров]

Ingernirated: Какой URL? на что пытаетесь поменять?

[Ingernirated]

Андрей Буров: на несуществующий, я думал он просто заменит название.
сейчас поменял на существующий, но title не меняется, он задается тот, который в ссылке на новый документ

var s = {
		"page_id" : 3,
		"user_id" : 27
	}
	var t = "repiare of toys";
	var u = "index.html"
	history.pushState(s, t, u);

[Андрей Буров]

Ingernirated:

Title — в данный момент Firefox игнорирует данный параметр. Тем не менее аргумент может передаваться. Передача пустой строки вместо title должна быть безопасной с учётом будущих изменений метода. В качестве альтернативы можно передавать title в объекте state и использовать его оттуда.

Меняйте title вручную

Answer 3

[Андрей Павленко]

Еще есть вариант с плагином Pjax, хотя он имеет недостатки и привязку к JQuery.
https://github.com/defunkt/jquery-pjax