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

Question

ImagineWorld @ImagineWorld

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

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

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

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

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

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

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']

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

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

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

Дархан @darakanoit

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

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

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

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

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