브라우저 다시 로드 간섭 없이 브라우저에서 사용자의 뒤로 버튼 클릭을 감지하는 방법은 무엇입니까?

브라우저에서 사용자의 뒤로 버튼 클릭 감지

뒤로 버튼 클릭을 감지하려고 할 때 개발자는 종종 window.onbeforeunload 이벤트 리스너에 의존합니다. 그러나 이 이벤트는 뒤로 버튼 클릭뿐만 아니라 브라우저 다시 로드에 대해서도 트리거되므로 오해의 소지가 있을 수 있습니다.

브라우저 다시 로드 간섭 없이 뒤로 버튼 클릭 감지

처리하려면 잘못된 긍정 없이 뒤로 버튼을 클릭하는 경우 맞춤형 접근 방식 사용을 고려하세요.

1. 기록 수정:

   • 페이지 로드 시 History.pushState API를 사용할 수 있습니다.
   • 지원되는 경우, History.pushState를 사용하여 기록에 임의의 상태를 푸시합니다.
   • 뒤로 및 앞으로 버튼 전환을 처리하도록 onpopstate 이벤트 리스너를 정의하세요.

2. 해시 기반 접근 방식:

   • history.pushState가 지원되지 않는 경우 해시 변경 이벤트(window.onhashchange)를 사용합니다. .
   • 초기 해시 값을 설정하고 해시 변경 시 무작위가 아닌 해시 값을 확인합니다.
   • 사용자가 시작한 해시 변경만 뒤로 버튼 논리를 트리거하도록 플래그를 사용합니다. 브라우저 새로고침을 무시합니다.

구현

<code class="javascript">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back button click here
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Handle back button click here
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

호환성

이 접근 방식 Chrome 및 Firefox에서 효과적으로 작동하는 것으로 보고되었습니다.

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