Используя кнопку НАЗАД, чтобы вернуться к предыдущему состоянию страницы

Question

Я пробую новую функциональность для моего веб-сайта. Я хочу сделать простую навигацию, скрывая / показывая <div> элементы.

Например, когда пользователь нажимает кнопку "Подробнее" на каком-либо продукте, я хочу скрыть главное <div> и показать <div> содержащий детали для продукта.

Проблема в том, что для возврата к предыдущей "странице" мне нужно отменить все изменения стиля отображения / видимости, что нормально, если пользователь нажимает кнопку "закрыть" во вновь открывшейся <div>, Но большинство пользователей нажимают кнопку НАЗАД.

Есть ли способ заставить кнопку BACK вернуться к предыдущему "состоянию" страницы, т. Е. Отменить изменения видимости / отображения?

Благодарю.

Answer 1

Чтобы ответить на вопрос о вашем названии (это то, что я искал)

Используя кнопку НАЗАД, чтобы вернуться к предыдущему состоянию страницы

и по ссылке из ответа @ reach4thelasers, вы должны установить таймер и снова и снова проверять текущий якорь:

//On load page, init the timer which check if the there are anchor changes each 300 ms  
$().ready(function(){  
   setInterval("checkAnchor()", 300);  
});

потому что нет обратного вызова Javascript, вызванного, когда BACK кнопка нажата и только якорь меняется...

-

Кстати, шаблон, о котором вы говорите, теперь называется одностраничным интерфейсом!

Answer 2

Да. То, что вы ищете, называется историей браузера AJAX.

Существует несколько открытых реализаций, таких как RSH, а также плагины / модули для таких сред, как jQuery и YUI.

Answer 3

Вам нужно добавить привязку к URL при каждом изменении

www.site.com/page.html#anchor1

Это позволит браузеру поддерживать страницы в своей истории. Я реализовал его на своем текущем сайте после изучения этого учебника, который отлично работает и дает вам хорошее понимание того, что вам нужно делать:

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Ваш пример в комментариях не будет работать, потому что он работает так:

1. Страница загружена

2. Страница изменена, добавьте привязку к URL (кнопка "Назад" возвращает вас назад к 1)

3. Страница изменена, привязка изменена (кнопка возврата возвращает 2)

4. Страница изменена, привязка изменена (кнопка "Назад" возвращает вас к 3)

   .... И так далее, и так далее..

Answer 4

Взгляните на этот учебник, основанный на ItsNat веб-инфраструктуре Java, ориентированной на веб-сайты с одностраничным интерфейсом

Answer 5

Если это так, то с точки зрения UX это звучит довольно злобно. Почему бы вам не создать кнопку "Назад" в своем приложении и использовать дизайн, чтобы сделать для пользователя очевидным, что им следует использовать кнопку "Назад" вашего приложения вместо браузера.

Под "использованием дизайна" я подразумеваю, чтобы ваше приложение выглядело как самодостаточный пользовательский интерфейс внутри браузера, чтобы пользователь оставался на вашей странице, а не смотрел на хром браузера, когда они ищут элементы управления для взаимодействия с ваше приложение.

Answer 6

Вы можете сделать это с помощью якорей, как это делается во многих приложениях flash или других приложениях, которые не переходят от страницы к странице. Facebook использует эту технику довольно свободно. Каждый раз, когда пользователь нажимает на ссылку, которая должна идти в его истории, меняйте привязку на странице.

Скажем так, ссылка на мою домашнюю страницу:

http://www.mysite.com/#homepage

Для ссылки, которая работает с вашим волшебством JavaScript, сделайте это:

<a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>

Это отправит пользователя на http://www.mysite.com/, где нажатие кнопки "Назад" вернет вас на http://www.mysite.com/. Тогда вам просто нужно прочитать якоря с

window.location.hash

чтобы выяснить, на какой странице вы должны быть.