JavaScript에서 해시 기호 뒤의 URL 변경을 어떻게 감지합니까?

해시 기호 이후 JavaScript의 URL 변경 감지

JavaScript는 다음 옵션을 포함하여 URL이 변경되었는지 감지하는 방법을 제공합니다.

• 온로드 이벤트:

  • 해시 기호 이후 URL이 변경되면 onload 이벤트가 트리거되지 않습니다.

• 이벤트 핸들러 URL:

  • 특별히 내장된 이벤트 핸들러가 없습니다. URL 변경을 감지합니다.

• 매초마다 URL 확인:

  • 매초마다 URL을 지속적으로 확인하면 작동할 수 있지만, 비효율적이며 성능이 저하될 수 있습니다.

Navigation API 사용(최신 브라우저용)

이제 주요 브라우저는 더 많은 기능을 제공하는 Navigation API를 지원합니다. URL 변경을 감지하는 효율적인 방법:

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

맞춤 이벤트 이전 브라우저

Navigation API가 없는 이전 브라우저의 경우 기록 개체를 수정하여 사용자 정의 이벤트 리스너를 생성할 수 있습니다.

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

이제 다음을 사용하여 URL 변경을 수신할 수 있습니다. "locationchange" 이벤트:

window.addEventListener("locationchange", function () {
    console.log("location changed!");
});

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