브라우저 뒤로 버튼 클릭을 안정적으로 감지하고 페이지 내 탐색을 적용하려면 어떻게 해야 합니까?

브라우저 뒤로 버튼 클릭을 감지하고 페이지 내 탐색을 강제하는 크로스 브라우저 기술

브라우저의 뒤로 버튼 클릭을 감지하고 사용을 강제합니다. 해시태그(#) 시스템을 사용하는 페이지 내 탐색 시스템의 도전적입니다.

브라우저 뒤로 버튼 감지

window.onhashchange만 사용하는 기존 접근 방식은 페이지 내 요소가 해시를 변경할 때도 트리거되므로 신뢰할 수 없습니다. 이 문제를 해결하기 위해 document.onmouseover, document.onmouseleave 및 부울 플래그(window.innerDocClick)를 활용하는 새로운 기술이 사용됩니다. 사용자의 마우스가 문서 영역에 들어오면 window.innerDocClick이 true로 설정되고, 문서 영역을 벗어나면 false로 설정됩니다. 이는 다음 window.onhashchange 핸들러를 허용합니다:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

페이지 내 뒤로 버튼 적용

페이지 내 뒤로 버튼을 통해서만 뒤로 탐색을 제어하려면, 사용자가 인터페이스를 진행하면서 이전 해시를 저장하는 데 기록 배열(window.location.lasthash)이 사용됩니다. 페이지 내 뒤로 버튼 기능(goBack)은 이 배열을 사용하여 이전 페이지로 이동합니다.

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    window.location.lasthash.pop();
}

백스페이스 키 억제

사용자가 백스페이스 키를 눌러 뒤로 버튼을 실행하려면 다음 코드 조각을 추가할 수 있습니다.

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

위 내용은 브라우저 뒤로 버튼 클릭을 안정적으로 감지하고 페이지 내 탐색을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!