자바 스크립트에서 뒤로 버튼 이벤트를 잡는 방법이 있습니까?
위치 해시 만 변경 될 때 자바 스크립트에서 뒤로 버튼을 누르거나 백 스페이스를 누르는 것에 응답하는 방법이 있습니까? 즉, 브라우저가 서버와 통신하지 않거나 페이지를 다시로드하지 않는 경우입니다.
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 전용인지 확실하지 않은 것 같습니다.
'Development Tip' 카테고리의 다른 글
Kotlin에 Java Lombok 접근자가 표시되지 않나요? (0) | 2021.01.08 |
---|---|
정규식 "독립 캡처 그룹"이란 무엇입니까? (0) | 2021.01.08 |
요소에서 창으로 스크롤 버블 링 방지 (0) | 2021.01.08 |
char와 char [1]의 차이점 (0) | 2021.01.08 |
Thread.Sleep 대 Task.Delay? (0) | 2021.01.08 |