JavaScript에서 해시 이후의 URL 변경을 어떻게 감지할 수 있습니까?

JavaScript에서 해시 후 URL 변경 감지

GitHub와 같은 AJAX 기반 웹사이트에서 작업할 때 URL이 변경되었는지 확인하는 방법은 다음과 같습니다. 중대한. JavaScript는 URL 변경을 모니터링하는 다양한 방법을 허용합니다.

URL 변경 감지 옵션:

• onload 이벤트: 이 이벤트는 페이지가 완전히 다시 로드되면 부분 URL을 감지하는 데 적합하지 않습니다. 변경사항.
• URL 이벤트 핸들러: JavaScript는 URL 변경에 대한 직접적인 이벤트 핸들러를 제공하지 않습니다.
• 정기 URL 확인: 지속적으로 URL 확인 매 순간이 리소스 집약적이고 비실용적일 수 있습니다.

개선됨 방법: Navigation API(2024)

이제 최신 브라우저는 URL 변경 사항을 감지하는 보다 효율적인 방법을 제공하는 Navigation API를 지원합니다. 작동 방식은 다음과 같습니다.

window.navigation.addEventListener("navigate", (event) => {
  console.log('location changed!');
});

대체 방법(사전 탐색 API)

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

이 솔루션은 기록 개체를 수정하여 기능을 추가하고 사용자 정의 이벤트를 생성할 수 있도록 합니다. 다음과 같은 청취자:

window.addEventListener('locationchange', () => {
    console.log('location changed!');
});

위 내용은 JavaScript에서 해시 이후의 URL 변경을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!