JavaScript에서 해시 변경을 포함한 URL 변경을 감지하는 방법은 무엇입니까?

JavaScript에서 해시로 URL 변경 감지

해시 기호 뒤의 변경 사항을 포함하여 URL의 변경 사항을 관찰하는 것은 AJAX를 사용하는 애플리케이션에 필수적입니다. 페이지 업데이트를 위해. JavaScript는 URL 변경을 추적하는 여러 가지 옵션을 제공합니다.

이벤트 핸들러

JavaScript는 URL 변경을 감지하는 데 사용할 수 있는 이벤트 핸들러를 제공합니다.

• onload: 이 이벤트는 초기 페이지 이후 URL 변경을 감지하는 데 적합하지 않습니다. load.
• hashchange: 이 이벤트는 해시 기호 뒤의 부분이 변경될 때만 발생하며, 다른 URL 수정에는 발생하지 않습니다.

수동 확인 URL

정기적으로 URL을 폴링하는 것은 투박하지만 신뢰할 수 있는 접근 방식입니다. 변화를 감지합니다. 그러나 지속적인 타이머가 필요하고 계산 비용이 많이 듭니다.

향상된 기록 API

최신 브라우저는 전용 "탐색" 이벤트를 제공하는 Navigation API를 지원합니다. 이 이벤트는 원인(예: pushState, replacementState, 해시 변경)에 관계없이 위치가 변경될 때마다 실행됩니다.

레거시 브라우저용 폴리필

이를 변경하지 않는 브라우저의 경우 Navigation API를 지원하지 않으면 다음과 같이 수정된 기록 개체를 구현할 수 있습니다.

(function() {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    window.addEventListener('popstate', () => {
        window.dispatchEvent(new Event('locationchange'));
    });
})();

이 수정은 모든 기록 작업(pushState, replacementState, popstate)에 대해 트리거되고 URL 변경을 감지하기 위해 이벤트 리스너를 연결할 수 있는 사용자 정의 "locationchange" 이벤트입니다.

위 내용은 JavaScript에서 해시 변경을 포함한 URL 변경을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!