У меня есть один постраничный сайт, сильно полагающийся на jQuery. В качестве портфолио пользователи могут нажимать на различные проекты, в которых jQuery будет скрывать главную страницу и восстанавливать страницу дизайна на основе содержимого, возвращаемого строкой запроса.
Проблема в том, что люди, которые хотели бы вернуться на главную страницу портфолио, естественно, будут нажимать кнопку BACK в своем браузере, заставляя их возвращаться к тому веб-сайту, на котором они были ранее (например, Google Search). Когда на самом деле, предполагаемое поведение заключается в том, что они возвращаются к основному.
Мой вопрос заключается в том, что лучший способ реализовать способ, чтобы кнопка BACK функционировала так, как если бы она была на многостраничном веб-сайте. Будет ли это связано с реализацией моего собственного пакета запросов? Каков наилучший вариант.
Большое спасибо. Веб-сайт здесь, если вы хотите увидеть его в действии.
Взгляните на библиотеку History.js, обрабатывая как современные браузеры, так и резервные копии для старых браузеров HTML4
https://github.com/browserstate/history.js/
В вашем обработчике событий внутри $(".mLink").click(function(){...
Всякий раз, когда вы запускаете свиток, вы можете добавить что-то вроде этого
case "mL0": $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo'); History.pushState(null, null, "?home"); break; case "mL1": $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo'); History.pushState(null, null, "?portfolio"); break; ...
Красивый портфолио сайта, кстати.
Как насчет размещения хеш-тега в URL-адресе? Что-то вроде этого?
<a href="#about">About</a>
А где-то в коде должна быть строка с этим?
<div id="about"> <h2>About/h2> <!-- More content here --> </div>
Возможно, вы захотите изучить API истории HTML5 . Существует множество учебников о том, как начать работу с ним, но основная идея заключается в том, что при загрузке новой «страницы» с помощью jQuery вы вставляете ее в стек истории:
// After loading the new page... window.history.pushState({}, '', 'newpage.html');
Это заставит пользовательский агент отображать yoursite.com/newpage.html в строке URL, даже если страница никогда не была загружена.
Caniuse сообщает, что поддержка API истории довольно хороша . Обычные подозреваемые (IE 7 и 8) не имеют поддержки, но есть полиполки .
Единственное предостережение с API истории (и это важно) заключается в следующем: страница, которую вы передаете как третий (необязательный) аргумент history.pushState ДОЛЖЕН существовать на вашем сервере . Пользователь может скопировать URL-адрес из строки URL и поделиться им, поэтому имена страниц должны соответствовать реальным страницам. Проблема в том, что на самом деле не похоже, что он будет работать с вашим сайтом, потому что у вас нет отдельных страниц, которые вы динамически загружаете.
Мне кажется, что ваше портфолио – одна непрерывная страница, поэтому для этого я бы рекомендовал использовать хэш-URL. То есть, URL-адреса, такие как yoursite.com/#about и yoursite.com/#contact . Вы можете обновить window.location чтобы включить хэш при загрузке новых страниц (и браузер не будет повторно загружать страницу).
window.location = '#new-page-that-was-just-navigated-to';
Или вы можете просто обновить window.location.hash . Вы можете просмотреть содержимое хэша с помощью javascript, когда ваш сайт загружается с этим свойством, чтобы определить, какая страница должна отображаться.
$(document).ready(function() { switch(window.location.hash) { case 'home': // load home case 'about': // load about default: // load default page (index) } });
Кроме того, вы можете абстрагировать свой JS из своего HTML с помощью события HashChange (полиполк, доступный на странице документов MDN ). Вместо этого:
<a href="javascript:void(0);" id="about">About</a> <a href="javascript:void(0);" id="projects">Projects</a> <a href="javascript:void(0);" id="contact">Contact</a> <script> document.getElementById('about').addEventListener('click', function() { // navigate to about page }, false); document.getElementById('projects').addEventListener('click', function() { // navigate to projects page }, false); //etc. </script>
Вы можете сделать это:
<a href="#about" id="about">About</a> <a href="#projects" id="projects">Projects</a> <a href="#contact" id="contact">Contact</a> <script> window.addEventListener('hashchange', function() { switch(window.location.hash) { case 'about': // load page case 'projects': // load page case 'contact': // load page default: // not found } }, false); </script>
Преимущества этого в том, что ваши ссылки имеют значимые hrefs, и вам не нужно добавлять слушателей событий к каждой ссылке на вашем сайте. Просто назначьте им хэш и послушайте hashchange .
РЕДАКТИРОВАТЬ
Обратите внимание, что это также работает с jQuery:
$(window).on('hashchange', function() { switch(window.location.hash) { case 'about': // load page case 'projects': // load page case 'contact': // load page default: // not found } });
Содержимое загружается через AJAX в одном div. Поэтому немного сложно вернуться к предыдущему, потому что ваш контент обновлен новым.
Вы можете использовать «history.pushState» для изменения URL-адреса на основе выбранной вами записи меню … вы можете проверить эту веб-страницу на примере – http://html5.gingerhost.com/ .
Кнопка BACK обычно переходит к предыдущему URL-адресу, а на страницах AJAX URL-адрес не обновляется сам по себе. Вы можете явно изменить URL-адрес, используя «history.pushState», и BACK будет работать так, как вы ожидаете.
Это также сделает ваш сайт поисковой системой