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

Question

ImagineWorld @ImagineWorld

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

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

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

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

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

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

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

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

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

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

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

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

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

+2 ещё

Средний
Как преобразовать сайт в приложение на iOS бесплатно?
- 1 подписчик
- вчера
- 169 просмотров
2

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

+2 ещё

Простой
Как мне правильно развиваться в первую очередь как хороший программист, а потом уже как backend python?
- 4 подписчика
- 02 нояб.
- 3871 просмотр
6

ответов
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 104 просмотра
2

ответа
WordPress

+3 ещё

Простой
Сопровождение сайтов на абонентской основе — что это на практике сейчас?
- 2 подписчика
- 31 окт.
- 480 просмотров
4

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

+2 ещё

Средний
Как создать Realtime Database на Firebase для игры на сайте?
- 1 подписчик
- 31 окт.
- 43 просмотра
0

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

Простой
Где найти макет с подробным техническим заданием?
- 1 подписчик
- 30 окт.
- 125 просмотров
0

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

Средний
Почему не рендерится ответ fetch в виде DOM?
- 1 подписчик
- 30 окт.
- 102 просмотра
1

ответ
JavaScript

+3 ещё

Простой
Как развернуть веб приложение node js на виртуальном сервере для работы в телеграм боте?
- 2 подписчика
- 29 окт.
- 146 просмотров
1

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

+1 ещё

Простой
Как вызвать встроенный сканер qr кодов в telegram web app?
- 2 подписчика
- 29 окт.
- 748 просмотров
1

ответ
HTML

+2 ещё

Средний
Как заблокировать на странице div id с изменяющимся параметром?
- 2 подписчика
- 28 окт.
- 193 просмотра
2

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

Middle Frontend разработчик (React JS)

EasyGate

от 120 000 ₽

Инженер по внедрению и сопровождению ПО

МАЙНИТЕК • Екатеринбург

от 87 600 до 100 000 ₽

Node JS бэкенд-разработчик (частичная занятость)

Соционом

от 250 000 ₽

Оптимизация ботов телеграм

06 нояб. 2024, в 00:20

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

Смарт-контракт на блокчейне TON

06 нояб. 2024, в 00:03

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

Ручное тестирование приложения в сторах (iOS и Android)

05 нояб. 2024, в 23:19

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

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

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);

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

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

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

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

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

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