facebook의 사진 뷰어에서 기록을 수정하는 방법은 무엇입니까?

Question

내 웹 사이트에 페이스 북의 사진 뷰어와 비슷한 팝업 모달이 있습니다. 모달이 열리면 다른 페이지의 콘텐츠가 표시되고이를 표시하기 위해 주소 표시 줄 값과 기록을 변경하고 싶습니다.

모달의 내용이 다른 페이지의 내용으로 변경되는 드롭 다운이 모달에 있습니다. 이 경우 다시 한 번 페이지가 변경되었음을 나타 내기 위해 주소 표시 줄 값과 기록을 변경하려고합니다. 페이지의 사진에 Photos

클릭에

1. Clicking on this link
2. 클릭 :

   기본적으로, 나는 정확히에 의해 시도 할 수 있습니다 페이스 북의 사진 뷰어의 동작을 복제 할

3. 오른쪽 또는 왼쪽 화살표를 클릭하거나 키보드 화살표 키를 사용하여 iamges를 변경하십시오.
4. a) 클릭하십시오. 브라우저
5. B)에서 다시 앞으로 역사 버튼 내가이과에서 어딘지 보여주기 위해 나는 JSFiddle을 만들려고

사진 뷰어 밖으로 클릭 만 JSFiddle 분명히에 역사를 허용하지 않습니다 조작되다. 따라서 my code online here을 넣었으며 어느 것이 you can download from here인지 알려드립니다.

---

몇 가지 핵심 포인트 : 인덱스 페이지를 확인하여

• 시작, 다음 을해야 뒤로 버튼을 누르면 모달가 닫혀 테스트 페이지
• 로 이동 링크를 이용해 모달을 다시 열지 말고 대신 색인 페이지로 돌아 가야합니다.
• 모달을 닫은 후 앞으로 단추를 누르면 페이스 북의 사진 뷰어에서 원래 상태로 모달을 다시 열어야합니다.
• 내 프로덕션 코드에서 URL에 변수를 추가/변경하는 대신 전체 URL이 변경됩니다. 데모 코드와 같이

Answer 1

당신은 역사의 API를 사용할 수 있고, 특히 당신이 사용자가 당신이 뭔가 할 수있는 모달 열립니다 그래서 때 history.pushState()history API

을 사용해야합니다 :

을

여기서 stateObj는 기록을 통해 전달하는 개체이고 2 페이지는 제목이며 마지막 매개 변수는 수정할 URL입니다.

브라우저를 마치면 popstate event에 사용해야합니다. 뒤로 및 앞으로 단추는 페이지를 다시로드하지 않습니다.