Кнопка "Назад" для одностраничного веб-сайта

У меня есть один страничный веб-сайт, который сильно зависит от jQuery. В качестве портфолио пользователи могут щелкать по различным проектам, в которых jQuery будет скрывать главную страницу, и восстанавливать страницу дизайна на основе содержимого, возвращаемого строкой запроса.

Проблема в том, что люди, которые хотели бы вернуться на главную страницу портфолио, естественно, нажимают кнопку BACK в своем браузере, заставляя их вернуться на любой веб-сайт, на котором они были ранее (например, поиск Google). Когда на самом деле предполагаемое поведение таково, что они возвращаются к основному.

Мой вопрос заключается в том, как лучше всего реализовать такой способ, чтобы кнопка BACK функционировала так, как если бы она была на многостраничном веб-сайте. Будет ли это включать реализацию моего собственного стека запросов? Какой самый лучший вариант.

Большое спасибо. Сайт здесь, если вы хотите увидеть его в действии.

Источник

5 ответов

Взгляните на библиотеку 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) не имеют поддержки, но есть доступные полифилы.

Единственное предупреждение с помощью History 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>

Преимущество этого заключается в том, что ваши ссылки имеют значимые ссылки, и вам не нужно добавлять прослушиватели событий для каждой ссылки на вашем сайте. Просто назначьте им хэш и слушайте 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
    }
});
Источник

Вы можете использовать "history.pushState", чтобы изменить URL-адрес в зависимости от пункта меню, который вы щелкнете... Вы можете проверить эту страницу на примере - http://html5.gingerhost.com/.

Кнопка BACK обычно переходит на предыдущий URL-адрес, а на страницах AJAX URL-адрес не обновляется сам по себе. Вы можете явно изменить URL, используя "history.pushState", и BACK будет работать так, как вы ожидаете.

Это также сделает ваш сайт удобным для поисковых систем

Источник

Ваш контент загружается через AJAX в одном div. Так что немного сложно вернуться к предыдущему, потому что ваш контент обновляется новым.

Источник
Другие вопросы по тегам