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

Question

ImagineWorld @ImagineWorld

Веб-разработка

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

Есть сайт, который подгружает контент с помощью AJAX, без перезагрузки страницы.
При открытии определенной страницы из меню, динамически меняется контент и в URL добавляется значение. Как сделать чтоб за этим значением в URL закрепилась та страница, которая загружена и при обновлении страниц с этим URL, открывалась она же, а не корневая?

Типо справа меню:
Главная
Профиль
Новости

По дефолту загрузилась главная, когда нажал на "Новости", то контент главной страницы удалился, а AJAXом подгрузился контент новостей и в URL добавилось "news". Нужно чтобы если я нажму обновить страницу с URL "news", то загрузились именно новости. Как такое можно реализовать? Спасибо.

Вопрос задан более трёх лет назад
257 просмотров

5 комментариев

Подписаться 2 Простой 5 комментариев

Дмитрий @Compolomus

Я на якорях делал

Написано более трёх лет назад
ImagineWorld @ImagineWorld Автор вопроса

Дмитрий, на якорях оно ж никуда не ведёт)

Написано более трёх лет назад
Дмитрий @Compolomus

ImagineWorld, ведет

Написано более трёх лет назад
ImagineWorld @ImagineWorld Автор вопроса

Дмитрий, можно пример?

Написано более трёх лет назад

Дмитрий @Compolomus

ImagineWorld, было это давно

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
</script>
<script type="text/javascript">
//
function get_content() {
$.ajax({
url: 'nav.php',
data: {anchor:window.location.hash.substring(2)},
success: function (data) {
$('#div_content').html(data); 
$('#div_content').attr('disabled', false); 
},
dataType: "html"
});
console.log(window.location.hash.substring(2)); 
}
$(function() {
$(window).hashchange(function(){
if(location.hash != '')
get_content();
else
window.location;
});
});
</script>
<body>
<div id="navbar">
<ul>
<li><a href="?">Главная </a></li>
<li><a href="#!razdel">Разделы</a>
</li>
<li><a href="#!rayon">Районы</a>
</li>
<li><a href="#!city">Город</a>
</li>
<li><a href="#!feedback">Обратная связь</a></li>
<li><a href="#!reg">Регистрация | Вход</a></li>
</ul>
</div>
<div id="div_content">
<!-- 
content here
-->                      
</div>  
</body>

Ну а в nav.php обычный switch по гет из $_GET['anchor']

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 3

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

Веб-разработка

Простой
Не будет ли проблем при использовании хостинга другой страны?
- 1 подписчик
- вчера
- 112 просмотров
2

ответа
Веб-разработка

+1 ещё

Средний
Как сделано всплывающее окно с моим e-mail адресом Google, который я на этом сервере не оставлял?
- 1 подписчик
- 17 апр.
- 140 просмотров
2

ответа
WordPress

+2 ещё

Простой
Из-за чего выдает такое на главной после переноса?
- 1 подписчик
- 17 апр.
- 74 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- 17 апр.
- 116 просмотров
1

ответ
Веб-разработка

Простой
Как создать сложные css-анимации как в примере?
- 1 подписчик
- 17 апр.
- 107 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
Какой здесь используется веб приложение для просмотра vnc?
- 1 подписчик
- 17 апр.
- 37 просмотров
1

ответ
Веб-разработка

Средний
Почему Postman выдает ошибку 403?
- 1 подписчик
- 16 апр.
- 103 просмотра
0

ответов
PHP

+2 ещё

Средний
Версии файлов на сайте отличаются от тех что я вижу через админку?
- 1 подписчик
- 15 апр.
- 111 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
Как правильно в api реализовать систему уведомлений на сайт и в тг бота?
- 4 подписчика
- 14 апр.
- 1077 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2673 просмотра
2

ответа
Показать ещё Загружается…

Веб-разработчик

Искра • Екатеринбург

от 80 000 до 100 000 ₽

Веб-разработчик

Art gorka • Санкт-Петербург

от 60 000 ₽

Веб-дизайнер

Stakewolle

от 40 000 до 60 000 ₽

Написать программу иммитирующую поведение человека для выбора услуг

20 апр. 2024, в 00:08

10000 руб./за проект

Разработать мобильное приложение android "справочник студента"

20 апр. 2024, в 00:01

4000 руб./за проект

[python,go] Залить ВИДЕО в тикток

19 апр. 2024, в 23:00

5000 руб./за проект

Дмитрий, на якорях оно ж никуда не ведёт)

Answer 1 · 2020-07-08 18:25:22

Дархан @darakanoit

Создать SPA приложения и прикрутить SSR.
Например на vue.js + nuxt.js

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2020-07-08 19:44:08

xmoonlight @xmoonlight

https://sitecoder.blogspot.com

includeHTML + роутинг для ссылок в history.

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2020-07-09 05:25:16

Araik @NinjaNickName

Web разработчик

History.pushState()

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';

history.pushState(state, title, url);

Ответ написан более трёх лет назад

Комментировать

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

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

Минуточку внимания

Войдите на сайт