브라우저에서 뒤로 버튼 클릭 감지

브라우저에서 뒤로 버튼 클릭 감지

이 질문에는 이미 다음과 같은 답변이 있습니다.

내 AJAX 응용프로그램의 백 버튼으로 호출 가로채기 (13개 답변)

닫힘9년 전에.

사용자가 뒤로 버튼을 클릭했는지 여부를 감지해야 합니다.이것을 위해 사용하고 있습니다.

window.onbeforeunload = function (e) {
}

사용자가 뒤로 버튼을 클릭하면 작동합니다.그러나 이 이벤트는 사용자가 브라우저의 다시 로드 버튼을 클릭할 경우에도 실행됩니다.이거 어떻게 고쳐요?

아약스에 관한 한...

페이지의 특정 부분을 탐색하기 위해 AJAX를 사용하는 대부분의 웹 애플리케이션을 사용하는 동안 뒤로 누르는 것은 큰 문제입니다.저는 '버튼을 비활성화해야 한다는 것은 당신이 뭔가 잘못하고 있다는 것을 의미한다'는 것을 받아들이지 않고, 사실 서로 다른 측면의 개발자들은 오랫동안 이 문제에 부딪혀 왔습니다.제 해결책은 이렇습니다.

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the 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;
            }
        };
    }
}

이것은 크롬과 파이어폭스에서 작동합니다.

브라우저가 "언로드 전에 켜짐"을 지원하지 않는 경우 다음을 시도하십시오.

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    $(window).on('popstate', function() {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];

      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
          alert('Back button was pressed.');
        }
      }
    });

    window.history.pushState('forward', null, './#forward');
  }

});

내가 아는 가장 좋은 방법은:

window.onbeforeunload = function (e) {
    var e = e || window.event;
    var msg = "Do you really want to leave this page?"

    // For Internet Explorer and Firefox
    if (e) {
        e.returnValue = msg;
    }

    // For Safari / Chrome
    return msg;
};

뒤로 버튼을 감지하고 있습니다.

window.onload = function () {
if (typeof history.pushState === "function") 
{
    history.pushState("jibberish", null, null);
    window.onpopstate = function () 
    {
        history.pushState('newjibberish', null, null);
        // Handle the back (or forward) buttons here
        // Will NOT handle refresh, use onbeforeunload for this.
    };
}

작동은 되지만 처음에 페이지에 표시되는 것을 감지하려면 크롬에서 쿠키를 만들어야 합니다. 쿠키로 제어하지 않고 페이지에 들어가면 브라우저가 뒤로 가기 버튼을 클릭하지 않고 뒤로 가기 작업을 수행하기 때문입니다.

if (typeof history.pushState === "function") 
{
    history.pushState("jibberish", null, null); 
    window.onpopstate = function () {
        if (((x = usera.indexOf("Chrome")) != -1) && 
              readCookie('cookieChrome') == null) 
        {
            addCookie('cookieChrome', 1, 1440);      
        } 
        else 
        {
            history.pushState('newjibberish', null, null);  
        }
    };
}

그리고 아주 중요한 건history.pushState("jibberish", null, null);브라우저 기록을 복제합니다.

어떻게 고치죠?

뒤로 버튼은 브라우저의 기능이기 때문에 기본 기능을 변경하기 어려울 수 있습니다.하지만 몇 가지 해결 방법이 있습니다.이 기사를 보십시오.

Q311 브라우저의 "뒤로" 버튼을 비활성화하려면 어떻게 해야 합니까?

일반적으로 뒤로 버튼을 비활성화해야 하는 것은 프로그래밍 문제/결함을 보여주는 좋은 지표입니다.양식을 이미 제출했는지 저장하는 session variable 설정이나 cookie 설정과 같은 방법을 찾고 싶습니다.

저는 당신이 Ajax 내비게이션을 다루려고 하는 것이 아니라 당신의 사용자들이 백 버튼을 사용하는 것을 막으려고 하는 것이라고 가정합니다. 이것은 UI 개발의 거의 모든 원칙을 위반하는 것입니다.

다음은 몇 가지 가능한 해결책입니다.

• jQuery History
• 살라작스
• A Better Ajax Back 버튼

언급URL : https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser