페이지를 새로 고치지 않고 URL 해시 조각을 제거하려면 어떻게 해야 합니까?

새로 고침 없이 URL 해시 조각 제거

오늘날의 최신 웹 개발 환경에서는 URL( 예: http://example.com#something)은 일반적인 요구사항입니다. "window.location.hash = ''" 설정과 같은 간단한 접근 방식은 직관적으로 보일 수 있지만 문제를 완전히 해결하지는 않습니다.

페이지를 새로 고치지 않고 해시를 효과적으로 제거하려면 HTML5를 사용합니다. 히스토리 API. 이 API는 현재 도메인 내 위치 표시줄의 URL을 조작하는 기능을 제공합니다.

다음 JavaScript 함수는 HTML5 History API를 활용하여 해시 조각을 제거합니다.

function removeHash() {
    history.pushState("", document.title, window.location.pathname + window.location.search);
}

이 코드 스니펫은 현재 URL을 해시 조각이 없는 새 URL로 대체하여 새 상태를 브라우저 기록에 푸시합니다. Chrome, Firefox, Safari, Opera, 심지어 IE 10과 같은 최신 브라우저에서도 원활하게 작동합니다.

History API를 지원하지 않는 브라우저의 경우 우아한 성능 저하 접근 방식을 사용할 수 있습니다.

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

이 확장 기능은 History API 지원이 부족한 브라우저에서 해시 제거를 보장하고 페이지 스크롤 위치를 유지하여 시각적인 최소화를 보장합니다.

이러한 기술을 사용하면 페이지 새로 고침을 실행하지 않고도 URL에서 해시 조각을 효율적으로 제거할 수 있으므로 다양한 브라우저에서 원활한 사용자 경험을 제공할 수 있습니다.

위 내용은 페이지를 새로 고치지 않고 URL 해시 조각을 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!