단일 페이지 응용 프로그램에서 뒤로 버튼을 처리합니까?

Question

비슷한 질문 here가 지적되었습니다!

나는 DHTMLX 툴킷 (독점적으로 멋진 물건)을 기반으로하는 SPA를 가지고 있습니다. 심각한 UX 문제 중 하나는 뒤로 버튼 처리입니다. 아무 것도 없습니다.

그들의 포럼은 'URL 해시에서 앱의 상태를 처리하고 다시 복원하는 모든 js 라우팅 라이브러리'를 권장했습니다.

SPA는 가장 단순한 HTML 만 있고 Javascript 만 사용하며 WebSockets을 통해 대부분의 통신을 수행하므로 혼란 스럽습니다 ... 각 버튼 클릭/키 누르기에 상태를 저장해야한다는 의미입니까?

그래서 ...

1. 패널 모범 사례에 대한 권장 사항이 있습니까?
2. 이렇게 할 기존 라이브러리가 있습니까?
3. 상기 라이브러리가 예제에 비추면, 누구나 기본적인 사용법을 제공 할 수 있습니까?

많은 감사

Answer 1

Dhtmlx는 SPA를 구축을위한 좋은 프레임 워크입니다. 모든 SPA와 마찬가지로, 뒤로 버튼은 단순히 앱에서 사용자를 바로 잡을 것입니다. 또한 사용자는 아무것도 북마크 할 수 없습니다.

그래서 당신이 원하는 것은 JavaScript를 사용하여 URL을 제어 할 수있는 pushState()입니다.

예를 들어 검색 화면을 표시하여 레코드로 이동한다고 가정합니다. 사용자는 검색 기준을 입력하고 검색을 누릅니다. 당신은 아약스를 통해 결과를 가져오고 그리드를 업데이트합니다. 그런 다음 사용자가 행을 선택하고 세부 정보 페이지 (여기에 일반적인 검색 기능)로 이동합니다. 이 북마크 사용자에게 페이지를 수
http:/me.com/search/23432

:

이 시점에서

, 당신은 같은 것을 URL을 변경할 수 pushState()을 사용할 것입니다. 그런 다음 사용자가 세부 정보 페이지를 떠나면 pushState()을 사용하고 URL을 http:/me.com/search

으로 설정하면 URL을 완벽하게 제어 할 수 있습니다.

다음에 배울 내용은 popState()입니다. 이 함수는 URL이 변경 될 때 호출됩니다. 사용자가 북마크를 "23432"로 이동한다고 가정 해 봅시다. popState()이 호출되며 그에 따라 대응할 것입니다.

기본적으로 간단히 말해서 : pushState() 및 popState()입니다.

일부 구형 브라우저는 pushState/popState에 반응하지 않습니다. URL 해시를 사용하는 이전 브라우저를 처리하기 위해 주위에 떠 다니는 라이브러리가 있습니다. 나는 html5 브라우저 만 지원할 정도로 익숙하지 않다.