> 웹 프론트엔드 > JS 튜토리얼 > JavaScript는 URL에서 해시 앵커 링크를 어떻게 감지할 수 있나요?

JavaScript는 URL에서 해시 앵커 링크를 어떻게 감지할 수 있나요?

Mary-Kate Olsen
풀어 주다: 2024-12-15 09:43:09
원래의
700명이 탐색했습니다.

How Can JavaScript Detect Hash Anchor Links in URLs?

JavaScript를 사용하여 URL에서 해시 앵커 링크를 식별하는 방법

동적 웹 페이지를 구축하든 대화형 위젯을 개발하든 관계없이 종종 필요한 경우가 있습니다. 해시 앵커 링크가 있는 URL과 없는 URL을 구별합니다. JavaScript에서 이 작업을 수행하려면 location.hash 속성을 활용할 수 있습니다.

해시 앵커 링크 확인

URL에 해시 앵커 링크가 포함되어 있는지 확인하려면 다음 코드 조각을 활용할 수 있습니다.

if (window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
로그인 후 복사

location.hash 속성은 다음의 URL 부분을 반환합니다. 해시 기호 자체를 포함한 해시 기호(#)입니다. 해시 앵커 링크가 URL에 있으면 location.hash는 비어 있지 않은 문자열이 됩니다. 해시 앵커 링크가 없으면 location.hash는 빈 문자열이 됩니다.

사용 예

다음 HTML 코드가 있다고 가정합니다.

<a href="page.html#anchor">Go to Anchor</a>
로그인 후 복사

사용자가 이 링크를 클릭하면 브라우저는 "page.html#anchor" URL로 이동합니다. 위에 제공된 JavaScript 코드를 사용하면 다음과 같이 URL에 해시 앵커 링크가 있는지 확인할 수 있습니다.

if (window.location.hash === "#anchor") {
  // Code to execute when the anchor exists
}
로그인 후 복사

location.hash 속성을 활용하면 해시 앵커 링크가 있는지 쉽게 확인할 수 있습니다. 이에 따라 조건부 논리를 구현할 수 있습니다.

위 내용은 JavaScript는 URL에서 해시 앵커 링크를 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿