Development Tip

자바 스크립트에서 뒤로 버튼 이벤트를 잡는 방법이 있습니까?

yourdevel 2021. 1. 8. 22:30
반응형

자바 스크립트에서 뒤로 버튼 이벤트를 잡는 방법이 있습니까?


위치 해시 만 변경 될 때 자바 스크립트에서 뒤로 버튼을 누르거나 백 스페이스를 누르는 것에 응답하는 방법이 있습니까? 즉, 브라우저가 서버와 통신하지 않거나 페이지를 다시로드하지 않는 경우입니다.


hashchange이벤트 사용 :

window.addEventListener("hashchange", function(e) {
  // ...
})

이전 브라우저를 지원해야하는 경우 Modernizr의 HTML5 Cross Browser Polyfills 위키 페이지에서 hashChange이벤트 섹션확인 하십시오.


일부 사람들에게 유용 할 수 있는 솔루션만들었습니다 . 페이지에 코드를 포함하기 만하면 뒤로 버튼을 클릭 할 때 호출 될 자체 함수를 작성할 수 있습니다.

IE, FF, Chrome 및 Safari에서 테스트했으며 모두 작동합니다. 내가 가진 솔루션은 IE 및 FF에서 지속적인 폴링이 필요하지 않은 iframe을 기반으로 작동하지만 다른 브라우저의 제한으로 인해 Safari에서 위치 해시가 사용됩니다.


이 문제를 만족스럽게 해결하기 위해 재미있는 해킹을했습니다. 콘텐츠를 동적으로로드 한 다음 window.location.hash를 수정하는 AJAX 사이트가 있으며 $ (document) .ready ()에서 실행하여 해시를 구문 분석하고 적절한 섹션을로드하는 코드가 있습니다. 문제는 탐색을위한 섹션 로딩 코드에 완벽하게 만족했지만 브라우저의 뒤로 및 앞으로 버튼을 가로채는 방법을 추가하고 싶었습니다.이 버튼은 창 위치를 변경하지만 현재 페이지 로딩 루틴은 방해하지 않습니다. window.location 및 일정한 간격으로 window.location을 폴링하는 것은 의문의 여지가 없습니다.

내가 한 일은 다음과 같은 객체를 만드는 것입니다.

var pageload = {
    ignorehashchange: false,
    loadUrl: function(){
        if (pageload.ignorehashchange == false){
            //code to parse window.location.hash and load content
        };
    }
};

그런 다음 사이트 스크립트에 다음과 pageload.loadUrl같이 해시 변경 이벤트 에서 함수 를 실행하는 줄을 추가했습니다 .

window.addEventListener("hashchange", pageload.loadUrl, false);

그런 다음 window.location.hash이 페이지로드 루틴을 트리거하지 않고을 수정하려면 window.location.hash =앞에 다음 줄을 추가하기 만하면 됩니다.

pageload.ignorehashchange = true;

그리고 각 해시 수정 줄 뒤에 다음 줄 :

setTimeout(function(){pageload.ignorehashchange = false;}, 100);

이제 내 섹션로드 루틴이 일반적으로 실행되고 있지만 사용자가 '뒤로'또는 '앞으로'버튼을 누르면 새 위치가 구문 분석되고 적절한 섹션이로드됩니다.


history.js를 확인하십시오 . html 5 statechange 이벤트가 있으며이를들을 수 있습니다.


onLocationChange유용 할 수도 있습니다. 이것이 Mozilla 전용인지 확실하지 않은 것 같습니다.


이거 봤어? http://developer.yahoo.com/yui/history/

참조 URL : https://stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript

반응형