Как изменить историю, как это делает программа просмотра фотографий facebook?

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

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

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

  1. Нажав на эту ссылку
  2. Нажав на Photos
  3. Нажав на фото на странице
  4. Щелкните стрелку вправо или влево (или используйте клавиши со стрелками на клавиатуре), чтобы изменить изображения.
  5. а) нажмите кнопки истории назад и вперед в браузере
  6. б) щелкните из средства просмотра фотографий

Я попытался создать JSFiddle, чтобы показать, где я нахожусь с этим, но JSFiddle, по-видимому, не позволяет манипулировать историей. Таким образом, я разместил свой код здесь, и который можно скачать отсюда.

Несколько ключевых моментов:

  • Начните с просмотра главной страницы, затем используйте ссылку для перехода на тестовую страницу.
  • Когда модальное окно закрыто, нажатие кнопки "Назад" не должно снова открыть модальное окно, а вместо этого должно вернуть вас на главную страницу.
  • После закрытия модального окна нажатие кнопки «вперед» должно снова открыть модальное окно в исходном состоянии, как это делает программа просмотра фотографий facebook.
  • В моем производственном коде полный URL-адрес будет изменен вместо добавления/изменения переменной в URL-адресе, как показано в демонстрационном коде.

javascript jquery pushstate browser-history html5-history
person Nate    schedule 19.12.2014    source источник
comment
как насчет replaceState?   -  person Daniel A. White    schedule 19.12.2014
comment
Вы читали страницу? Вы пропустили popstate событие ?   -  person Karl-André Gagnon    schedule 19.12.2014
comment
@Karl-AndréGagnon Может быть, я читал слишком быстро, но мне показалось, что popstate — это событие, которое вы ловите, а не функция, которую вы вызываете для удаления элемента из истории.   -  person Nate    schedule 19.12.2014
comment
@Nate точно, он ловит, когда история меняется. Таким образом, вы используете это событие, чтобы предотвратить перезагрузку страницы при выполнении .back().   -  person Karl-André Gagnon    schedule 19.12.2014
comment
@Karl-AndréGagnon Как бы вы предотвратили перезагрузку страницы из обработчика событий?   -  person Nate    schedule 19.12.2014
comment
@Nate На самом деле, забудь все, что я сказал, window.history.back() не следует перезагружать страницу, если ты использовал pushState. У вас должна быть проблема где-то еще. Протестируйте его в консоли. Введите window.history.pushState({}, "page 2", "bar.html");, URL-адрес изменится, затем window.history.back(); URL-адрес вернется к текущему без перезагрузки.   -  person Karl-André Gagnon    schedule 19.12.2014
comment
@Karl-AndréGagnon Я думал, что у нас это есть, но посмотрите на мою последнюю правку.   -  person Nate    schedule 19.12.2014
comment
@Nate Хорошо, вот где popstate пригодится. Вам нужно проверить, когда это событие запускается, если страница mysite.com/anotherpage, если это нет, вам нужно закрыть всплывающее окно.   -  person Karl-André Gagnon    schedule 20.12.2014
comment
Я задал тот же вопрос - stackoverflow.com/q/28561561/104380   -  person vsync    schedule 18.02.2015

Ответы (1)


arrow_upward
4
arrow_downward

Вы должны использовать API истории, и, в частности, вы должны использовать history.pushState() история API

Итак, когда пользователь открывает модальное окно, вы можете что-то сделать:

history.pushState(stateObj, "page 2", "image\id.html");

Где: stateObj — это объект, который вы проходите через историю, страница 2 — это заголовок, а последний параметр — это URL-адрес, который вы хотите изменить.

После того, как вы это сделаете, вы должны использовать на событие popstate так как кнопки браузера «Назад» и «Вперед» не будут перезагружать страницу.

person Rosmarine Popcorn    schedule 11.02.2015
comment
Да, я пробовал разные вещи с функциями истории, но не могу воспроизвести поведение facebook. Основная проблема, с которой я столкнулся, заключается в том, что при закрытии модального окна я хочу, чтобы кнопка «Назад» возвращала браузер на предыдущую страницу вместо повторного открытия модального окна, но я не могу понять, как это сделать. Пожалуйста, посмотрите демонстрацию, которую я разместил вместе с просмотром поведения Facebook. +1 однако. - person Nate; 11.02.2015
comment
@Nate, когда вы закрываете окно, не делайте pushState, так как он делает новую вставку в историю, сделайте window.history.back() и проверьте, когда вы открываете модальное окно.history.length должно увеличиться на +1, а когда вы закрываете его, он должен уменьшаться -1, а не увеличиваться. - person Rosmarine Popcorn; 11.02.2015
comment
Это отвечает на половину вопроса. когда вы закрываете модальное средство просмотра фотографий, все нажатые состояния удаляются. Как они это делают? - person vsync; 18.02.2015
comment
@vsync просто вызовите window.history.back(); - person Rosmarine Popcorn; 18.02.2015
comment
Это обновит страницу. они делают что-то вроде window.history.go(-N), но никогда не обновляются. в этом тайна. - person vsync; 18.02.2015
comment
@vsync не будет обновлять страницу, если предыдущий объект в истории помещается в состояние push вместо классического просмотра обратно. - person Rosmarine Popcorn; 18.02.2015
comment
да я только что понял, что это не будет :) круто - person vsync; 18.02.2015