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

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

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

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

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

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

Python

+2 ещё

Простой
Как в Visual Studio написать веб-проект Пайтон если не появляется строка?
- 1 подписчик
- 3 часа назад
- 45 просмотров
0

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

+1 ещё

Простой
Какой отечественный linux выбрать для веб-разработки?
- 2 подписчика
- 5 часов назад
- 303 просмотра
6

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

+1 ещё

Средний
Как сделать загрузочный экран, чтобы он был виден всем кто онлайн?
- 1 подписчик
- 13 часов назад
- 98 просмотров
1

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

Простой
Правильная ли структура объекта для multi menu?
- 1 подписчик
- 14 часов назад
- 42 просмотра
0

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

+1 ещё

Простой
На сайте появились реклама, которая не должна быть?
- 2 подписчика
- 20 нояб.
- 261 просмотр
2

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

+3 ещё

Простой
Какие параметры отвечают за rateLimit в Ingress kuberneties?
- 1 подписчик
- 20 нояб.
- 60 просмотров
2

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

Средний
Как сделать автоматический запуск музыки на сайте с постоянным фоновым воспроизведением?
- 1 подписчик
- 18 нояб.
- 108 просмотров
2

ответа
HTML

+1 ещё

Простой
Вопрос по DIV и uKit (не обращайте внимания на знак вопроса)?
- 1 подписчик
- 15 нояб.
- 118 просмотров
1

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

Простой
Почему Django загружает не все css файлы?
- 1 подписчик
- 11 нояб.
- 98 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Какой плагин для маски номера посоветуете?
- 3 подписчика
- 11 нояб.
- 323 просмотра
1

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

Fullstack разработчик для веб-проектов

Asphera Tech

от 25 000 ₽

Fullstack разработчик (JavaScript, PHP, SQL), веб программист.

CleanTalk

от 1 800 $

Разработчик Drupal ( программист php 7 )

IT House

от 80 000 ₽

Браузерное расширение-парсер

22 нояб. 2024, в 20:23

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

Анализ и оценка проектов, с последующим запуском

22 нояб. 2024, в 20:20

1000 руб./в час

Разработать админ панель на yii2

22 нояб. 2024, в 19:51

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

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

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

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

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

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

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

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

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