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

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

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

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

Clicking on this link
Кликнув на Photos
Кликнув на фотографию на странице
Щелкните правой или левой стрелкой (или используйте клавиши со стрелками клавиатуры), чтобы изменить iamges
a) щелкните назад и вперед кнопки история в вашем браузере
б) нажмите из просмотра фотографий

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

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

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

источник

2014-12-19 Nate

Что относительно 'replaceState'? –

Вы прочли страницу? Пропустили ли вы событие ['popstate'] (https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_popstate_event)? –

@ Karl-AndréGagnon Возможно, я читал слишком быстро, но мне казалось, что «popstate» - это событие, которое вы поймаете, а не функцию, которую вы вызываете, чтобы удалить элемент из истории. – Nate

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

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

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

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

После того, как вы это сделали, вам необходимо использовать на popstate event, поскольку кнопки браузера Back и Forward не перезагружают страницу.

источник

2015-02-11 18:37:20 Burimi

Да, я пробовал разные вещи с функциями истории, но не могу воспроизвести поведение facebook. Основная проблема, с которой я столкнулась, заключается в закрытии модальности, я хочу, чтобы кнопка «назад» заставила браузер вернуться к предыдущей странице вместо повторного открытия модального кода, но я не могу понять, как это сделать. См. Демонстрацию, которую я опубликовал, и посмотрев на поведение facebook. +1 хотя. – Nate

@Nate, когда вы закрываете окно, не делайте pushState, так как он добавляет новую историю в историю, делает window.history.back() и проверяет, когда вы открываете модальное window.history.length должно увеличиваться +1 и когда вы закрываете, он должен уменьшаться -1, а не увеличиваться. – Burimi

Это отвечает на половину вопроса. когда вы закрываете средство просмотра модальных фотографий, все нажатые состояния удаляются. Как они это делают? – vsync

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

ответ

Смежные вопросы