브라우저에서 뒤로 버튼 클릭을 정확하게 감지하는 방법은 무엇입니까?

향상된 정확도로 브라우저에서 뒤로 버튼 클릭 감지

소개:

뒤로 버튼 클릭 식별은 브라우저 구현에 필수적입니다. 탐색 기록 추적. 다양한 접근 방식이 존재하지만 실제 뒤로 버튼 클릭과 유사한 이벤트를 트리거하는 다른 브라우저 작업을 구별하는 것이 중요합니다.

배경:

일반적인 접근 방식 중 하나는 창을 사용하는 것입니다. .onbeforeunload 이벤트 리스너는 사용자가 페이지를 닫거나 다른 페이지로 이동하려고 할 때 실행됩니다. 그러나 이 이벤트는 F5 키를 누르거나 페이지를 다시 로드하는 등의 작업에서도 트리거되어 오탐지로 이어집니다.

해결책:

이 문제를 해결하려면 더 정교한 솔루션이 필요합니다. 이 솔루션은 탐색 기록을 보다 세밀하게 제어할 수 있는 History.pushState 및 window.onpopstate 메소드를 활용합니다.

구현:

다음 코드 조각은 구현을 보여줍니다.

<code class="js">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

설명:

이 코드는 History.pushState를 사용하여 페이지를 다시 로드하지 않고 브라우저 기록을 업데이트합니다. 그런 다음 사용자가 뒤로 또는 앞으로 버튼을 클릭할 때 트리거되는 window.onpopstate 이벤트에 바인딩됩니다.

history.pushState를 지원하는 브라우저에서 이 접근 방식은 다시 로드 이벤트를 제외하고 뒤로 버튼 클릭을 정확하게 감지합니다. 이전 브라우저의 경우 코드는 해시 변경에 따른 대체 방법을 사용하므로 파운드 기호 처리에 약간의 제한이 발생합니다.

결론:

이 향상된 접근 방식은 다음을 보장합니다. 브라우저에서 뒤로 버튼 클릭을 정확하게 감지하여 window.onbeforeunload만 사용하는 제한을 제거합니다. 탐색 기록을 추적하고 사용자 경험을 향상시키기 위한 안정적인 솔루션을 개발자에게 제공합니다.

위 내용은 브라우저에서 뒤로 버튼 클릭을 정확하게 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!