브라우저 뒤로 버튼 이벤트를 감지하는 방법 - 크로스 브라우저

Question

사용자가 브라우저에서 뒤로 버튼을 눌렀는지 명시적으로 감지하는 방법은 무엇입니까?

#URL 시스템을 사용하여 단일 페이지 웹 애플리케이션에서 페이지 내 뒤로 버튼을 강제로 사용하려면 어떻게 해야 하나요?

브라우저 뒤로 버튼이 자체 이벤트를 실행하지 않는 이유는 무엇입니까? ?

Answer 1

다음과 같은 popstate 이벤트 핸들러를 사용해 볼 수 있습니다.

으아아아

^{참고: 최상의 결과를 얻으려면 다른 예상치 못한 문제를 방지하기 위해 논리를 구현하려는 특정 페이지에만 이 코드를 로드해야 합니다.}

popstate 이벤트는 현재 기록 항목이 변경될 때마다(사용자가 새 상태로 이동) 시작됩니다. 이는 사용자가 브라우저의 뒤로/앞으로 버튼을 클릭하거나 history.back()、history.forward()、history.go() > 메서드가 프로그래밍 방식으로 호출될 때 발생합니다.

event.state은 이벤트의 속성으로, 과거 상태 개체와 동일합니다.

jQuery 구문의 경우 래핑합니다(문서가 준비된 후 리스너도 추가).

으아아아

참조: 페이지 로드 시 window.onpopstate

---

또한 단일 페이지 애플리케이션 및 HTML5 PushState에 대한 샘플 페이지를 참조하세요.

으아아아

Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ 및 유사한 버전과 호환되어야 합니다.

Answer 2

(참고: Sharky의 피드백을 기반으로 백스페이스를 감지하는 코드를 추가했습니다)

그래서 저는 SO에 대해 이러한 질문을 많이 보는데, 최근에는 뒤로 버튼 기능을 직접 제어하는 ​​데 문제가 발생했습니다. 내 애플리케이션에 가장 적합한 솔루션(해시된 탐색이 포함된 단일 페이지)을 검색한 후 며칠 동안 뒤로 버튼을 감지할 수 있는 간단한 크로스 브라우저 라이브러리 프리 시스템을 생각해 냈습니다.

대부분의 사람들은 다음을 사용하는 것을 권장합니다:

으아악

그러나 이 함수는 사용자가 위치 해시를 변경하는 인페이지 요소를 사용할 때도 호출됩니다. 사용자가 클릭하고 페이지가 앞뒤로 이동할 때 이는 최상의 사용자 경험이 아닙니다.

내 시스템의 일반적인 개요를 제공하기 위해 사용자가 인터페이스를 통해 이동함에 따라 이전 해시로 배열을 채울 것입니다. 다음과 같습니다:

으아악

매우 간단합니다. 이는 브라우저 간 지원과 이전 브라우저에 대한 지원을 보장하기 위해 수행됩니다. 새 해시 값을 함수에 전달하면 함수가 해당 값을 저장한 다음 해시 값을 변경합니다(그런 다음 브라우저 기록에 넣습니다).

또한 lasthash 배열을 사용하여 페이지 간에 사용자를 이동하는 페이지 내 뒤로 버튼을 활용했습니다. 다음과 같습니다:

으아악

이렇게 하면 사용자가 마지막 해시로 다시 이동하고 배열에서 마지막 해시가 제거됩니다(지금은 앞으로 버튼이 없습니다).

그러니까. 사용자가 페이지 내 뒤로 버튼이나 브라우저 버튼을 사용했는지 어떻게 알 수 있나요?

처음에는 window.onbeforeunload 보았지만 아무 소용이 없었습니다. 사용자가 페이지를 변경하려고 할 때만 호출됩니다. 해시 탐색을 사용하는 단일 페이지 애플리케이션에서는 이런 일이 발생하지 않습니다.

그래서 좀 더 파헤친 끝에 플래그 변수를 설정해 보라는 제안을 보았습니다. 내 경우 문제는 설정하려고 했지만 모든 것이 비동기식이므로 해시 변경 시 if 문에 맞춰 항상 설정되지 않는다는 것이 문제였습니다. .onMouseDown는 항상 click에서 호출되는 것은 아니며 onclick에 추가해도 충분히 빠르게 실행되지는 않습니다.

그 이후로 저는 文档和窗口之间的区别。我的最终解决方案是使用 document.onmouseover 设置该标志，并使用 document.onmouseleave이 기능을 비활성화하기 시작했습니다.

사용자의 마우스가 문서 영역(읽기: 렌더링된 페이지, 브라우저 프레임 아님) 내에 있을 때 내 부울은 true。一旦鼠标离开文档区域，布尔值就会翻转为 false로 설정됩니다.

이 방법으로 window.onhashchange를 다음과 같이 변경할 수 있습니다.

으아악

#undefine 체크 표시가 나타납니다. 이는 내 배열에 사용 가능한 기록이 없으면 정의되지 않음을 반환하기 때문입니다. 나는 이것을 사용하여 사용자에게 #undefined 的检查。这是因为如果我的数组中没有可用的历史记录，它将返回 undefined。我用它来询问用户是否想使用 window.onbeforeunload 이벤트를 사용하여 나갈 것인지 묻습니다.

간단히 말해서, 기록을 저장하기 위해 페이지 내 뒤로 버튼이나 배열을 반드시 사용할 필요가 없는 사람을 위한 방법은 다음과 같습니다.

으아악

당신이 원하는 게 바로 이것입니다. 해시 탐색 측면에서 뒤로 버튼 사용과 페이지 내 요소를 감지하는 간단한 3부분 접근 방식입니다.

편집자:

사용자가 백스페이스 키를 사용하여 뒤로 이벤트를 트리거하지 않도록 하려면 다음을 포함할 수도 있습니다(이 질문 덕분에):

으아악