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

이벤트 리스너를 사용하여 JavaScript에서 URL 변경을 감지하는 방법

URL 변경을 모니터링하는 것은 많은 JavaScript 애플리케이션, 특히 AJAX 및 단일 애플리케이션을 사용하는 애플리케이션에 중요합니다. -페이지 아키텍처. 이 기사에서는 URL 변경을 감지하는 데 사용할 수 있는 다양한 방법을 조사하고 가장 효과적인 접근 방식을 탐색할 것입니다.

URL 변경을 위한 이벤트 핸들러

여러 이벤트 핸들러가 있습니다. JavaScript에서 URL 변경을 추적하는 데 사용할 수 있습니다. 가장 일반적인 이벤트는 다음과 같습니다.

• 'hashchange' 이벤트: URL에서 '#' 기호 다음 부분의 변경 사항을 모니터링합니다.
• 'popstate' 이벤트: 브라우저의 뒤로 또는 앞으로 버튼을 사용하거나 기록 객체가 수정될 때(예: pushState 또는 replacementState를 통해) 활성화됩니다.

이러한 이벤트 핸들러는 안정적인 방법을 제공합니다. URL 변경을 감지하지만 제한이 있습니다. 'hashchange' 이벤트는 '#' 이후의 프래그먼트가 변경될 때만 트리거되는 반면, 'popstate' 이벤트는 항상 안정적으로 실행되지 않을 수 있습니다.

포괄적인 URL 모니터링을 위한 맞춤 이벤트

기존 이벤트 핸들러의 한계를 극복하기 위해 모든 URL 변경 사항을 모니터링하는 맞춤 이벤트를 생성할 수 있습니다. 기록 객체를 수정하면 pushState, replacementState 또는 popstate 이벤트를 통해 URL이 업데이트될 때마다 맞춤 'locationchange' 이벤트가 실행되도록 할 수 있습니다.

다음은 맞춤 이벤트를 구현하는 코드입니다.

(() => {
    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'));
    });
})();

이번 수정을 통해 이제 'locationchange' 이벤트에 대한 이벤트 리스너를 추가하여 URL 변경 사항을 안정적으로 감지할 수 있습니다.

결론

이벤트 핸들러를 활용하거나 사용자 정의 이벤트를 구현하면 JavaScript에서 URL 변경을 모니터링하는 효과적인 방법이 제공됩니다. 각 접근 방식에는 고유한 장점과 한계가 있습니다. 이러한 옵션을 이해하고 특정 요구 사항에 따라 가장 적절한 접근 방식을 선택함으로써 개발자는 애플리케이션이 URL 변경에 효과적으로 응답하도록 할 수 있습니다.

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