위챗, 알리페이 등 모바일 앱은 물론 브라우저의 복귀, 뒤로, 이전 페이지 버튼을 모니터링하는 이벤트 방법을 모르는 분들이 많습니다.

실제 애플리케이션에서는 페이지를 닫거나 지정된 페이지로 조정하거나 다른 작업을 수행하기 위해 모바일 앱 및 브라우저에서 돌아가기, 뒤로, 이전 페이지 및 기타 버튼을 클릭해야 하는 경우가 많습니다.

요구 사항, WeChat, Alipay, Baidu Nuomi, Baidu Wallet 및 기타 앱의 뒤로 버튼을 클릭하거나 브라우저의 이전 페이지 또는 뒤로 버튼을 클릭할 때 코드에서 이벤트를 모니터링하는 방법.

나처럼 많은 친구들이 오랫동안 Baidu와 Sogou에서 검색했지만 해결책을 찾지 못했다고 생각합니다. 모니터링 방법을 알려드리겠습니다.

우선 브라우저의 기록을 이해해야 합니다. 우리 모두 알고 있듯이 페이지의 JavaScript 창 기록을 사용하여 이전 페이지로 돌아갈 수 있습니다. 그러나 보안상의 이유로 JavaScript는

기록에 있는 기존 URL 링크를 수정할 수는 없지만, pushState 메소드를 사용하여 기록에 URL 링크를 추가하고 popstate 이벤트 모니터링을 제공하여 기록 스택에서 URL을 팝업할 수 있습니다. 팝스테이트 이벤트

모니터링이 제공되어 모니터링이 가능합니다.

복귀, 뒤로, 이전 페이지 버튼 클릭 모니터링 구현 코드:

window.addEventListener("popstate", function(e) {  
        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
    }, false);

뒤로 이벤트를 모니터링하더라도 페이지는 여전히 이전 페이지로 돌아가므로 pushState를 사용하여 추가해야 합니다. this 페이지의 URL은 이 페이지를 나타냅니다. #

function pushHistory() {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  
    }

라는 사실은 누구나 잘 알고 있습니다. 페이지에 들어가면 기록에 대한 로컬 연결이 푸시됩니다. 돌아가기, 뒤로, 이전 페이지 작업을 클릭하면 모니터링 코드에서 자체 작업을 모니터링하고 구현하게 됩니다.

다음은 전체 코드입니다.

$(function(){  
    pushHistory();  
    window.addEventListener("popstate", function(e) {  
        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
}, false);  
    function pushHistory() {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  
    }  
      
});

참고: 일부 코드는 온라인에서 찾을 수 있습니다!

후속 질문 모음:

1. 위챗 페이지에 진입하면 popstate 이벤트가 발생합니다.

해결책: 부울 변수 bool=false를 정의합니다. 페이지가 로드된 후 setTimeout 메소드를 사용하여 타임아웃을 1.5초로 설정하고, 타임아웃 실행 메소드에 bool=true를 설정합니다.

popstate 모니터링에 bool 판단을 추가합니다. bool=true일 때 콘텐츠를 실행합니다. 구체적인 코드는 다음과 같습니다.

$(function(){  
            pushHistory();  
            var bool=false;  
            setTimeout(function(){  
                  bool=true;  
            },1500);  
            window.addEventListener("popstate", function(e) {  
              if(bool)  
                {  
                        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
                }  
                pushHistory();  
                  
        }, false);  
        });

위는 위챗, 알리페이 등 모바일 앱과 많은 분들이 잘 사용하지 않는 브라우저의 돌아가기, 뒤로가기, 이전페이지 버튼을 모니터링하기 위한 이벤트 메소드 내용입니다. 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)에 주목해주세요!