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

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

5 голосов
/ 14 ноября 2009

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

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

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

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

Спасибо.

Ответы [ 6 ]

6 голосов
/ 14 ноября 2009

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

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

4 голосов
/ 27 октября 2010

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

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

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

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

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

-

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

3 голосов
/ 14 ноября 2009

Вам нужно добавить привязку к 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)

    .... и так далее и тому подобное ..

0 голосов
/ 09 февраля 2011

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

0 голосов
/ 14 ноября 2009

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

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

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

Для ссылки, которая работает с магией JavaScript, сделайте следующее: 

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

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

window.location.hash

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

0 голосов
/ 14 ноября 2009

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

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

...