JavaScript를 사용하여 페이지를 다시 로드하지 않고 브라우저의 URL을 어떻게 변경할 수 있습니까?

JavaScript를 사용하여 페이지를 다시 로드하지 않고 브라우저 URL 변경

많은 JavaScript 작업이 현재 페이지에 영향을 주지만 나중에 참조하거나 북마크할 수 있도록 URL을 변경해야 합니다. 또한 "뒤로" 버튼을 사용할 때 원래 URL을 복원하려는 욕구가 있습니다. 이를 달성하는 방법은 다음과 같습니다.

옵션 1: 조각 식별자 사용(레거시 브라우저의 경우)

최신 History.pushState 및 History.popState를 지원하지 않는 브라우저의 경우 , "오래된" 방법이 있습니다: 조각 식별자를 활용하는 것입니다. 이 방법을 사용하면 페이지를 다시 로드할 필요가 없습니다.

window.location.hash 속성에 원하는 상태 정보가 포함된 값을 할당하면 상태를 URL에 효과적으로 인코딩할 수 있습니다. 다음으로, window.onhashchange 이벤트를 사용하거나, 이전 브라우저의 경우 주기적으로 해시 값을 폴링하여 변경 사항을 감지해야 합니다. 페이지 로드 시 해시 값을 기반으로 페이지 콘텐츠를 초기화합니다.

옵션 2:history.pushState 및history.popState(최신 브라우저)

최신 브라우저에서는 History.pushState 및 History.popState 메소드는 더욱 깨끗하고 강력한 접근 방식을 제공합니다. History.pushState를 사용하면 페이지를 다시 로드하지 않고도 URL을 업데이트할 수 있으며, History.popState는 "뒤로" 버튼 처리를 처리합니다. 이 방법은 모든 주요 최신 브라우저에서 지원됩니다.

ID 충돌 방지

조각 식별자로 작업할 때 페이지의 요소 ID와의 충돌 가능성에 유의하세요. 브라우저는 ID가 해시 값과 일치하는 요소로 스크롤하는 경향이 있으며, 이로 인해 예기치 않은 동작이 발생할 수 있습니다.

위 내용은 JavaScript를 사용하여 페이지를 다시 로드하지 않고 브라우저의 URL을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!