JavaScript 하이퍼링크를 사용하는 방법

자바스크립트 하이퍼링크 사용 방법

하이퍼링크는 서로 다른 페이지, 서로 다른 웹사이트를 연결하는 웹페이지의 공통 요소이며, 자바스크립트는 웹페이지에 동적인 인터랙티브 효과를 추가하는 데 편리함을 제공합니다. 이 둘을 결합하면 웹페이지를 더욱 역동적이고 실용적으로 만들 수 있습니다. 이 기사에서는 JavaScript 하이퍼링크의 사용법과 구현을 자세히 소개합니다.

1. 기본 지식

HTML에서 하이퍼링크는 아래와 같이 태그를 사용하여 정의됩니다.

링크 텍스트

그 중 href 속성은 하이퍼링크가 가리키는 URL을 식별합니다. 현재 페이지의 앵커 지점에 대한 하이퍼링크를 가리켜야 하는 경우 아래와 같이 "#" 기호와 앵커 이름을 URL로 사용할 수 있습니다.

첫 번째 섹션으로 이동

또한, 태그도 괜찮습니다. 링크가 열리는 방식을 지정하려면 target 속성을 사용하세요. 일반적으로 사용되는 값에는 _blank, _self, _parent 및 _top이 있으며 각각 새 창에서 열기, 현재 창에서 열기, 상위 창에서 열기, 전체 창에서 열기를 의미합니다. 예:

새 창에서 링크 열기

2. JavaScript 하이퍼링크 구현 방법

1. 기본 점프 동작 방지

경우에 따라 하이퍼링크 점프를 금지하고 실행만 해야 하는 경우도 있습니다. 일부 JavaScript 코드. 이때 PreventDefault() 메소드를 사용하여 기본 점프 동작을 방지할 수 있습니다. 예:

No Jump, Execution JS code

위 코드에서 onclick 이벤트의 event.preventDefault() 문 핸들러 함수는 기본 점프 전송을 방지할 수 있으며 나중에 JavaScript 코드를 추가할 수 있습니다.

2. 링크의 href 속성 수정

어떤 경우에는 사용자 작업이나 데이터 상태에 따라 점프 링크를 동적으로 생성하기 위해 하이퍼링크의 href 속성을 동적으로 수정해야 할 수도 있습니다. 예:

Click to jump

<script></p> <pre class="brush:php;toolbar:false">document.querySelector(&quot;#myLink&quot;).addEventListener(&quot;click&quot;, function(){     var targetUrl = &quot;http://www.example.com?id=&quot; + getUserId();     this.href = targetUrl; });</pre> <p></script>

위 코드에서는 addEventListener() 메서드를 통해 클릭 이벤트 핸들러가 myLink 하이퍼링크에 추가됩니다. 사용자가 링크를 클릭하면 JavaScript 코드는 현재 사용자 ID를 기반으로 대상 URL을 가져오고 myLink 하이퍼링크의 href 속성을 대상 URL로 설정합니다.

3. 새 창에서 링크 열기

경우에 따라 새 창에서 하이퍼링크를 열어야 하는 경우가 있습니다. 이때 window.open() 메서드를 사용하여 메서드에 대상 URL과 미리 설정된 창 특성을 전달할 수 있습니다. 예:

새 창에서 링크 열기

위 코드에서 onclick 이벤트 핸들러가 호출됩니다. window.open() 메소드에 대상 URL과 _blank 속성을 전달하여 링크를 새 창에서 엽니다.

4. 페이지 스크롤 위치 변경

어떤 경우에는 페이지의 기준점으로 이동하기 위해 하이퍼링크를 클릭한 후 페이지 스크롤 위치를 변경해야 합니다. 이때 하이퍼링크의 href 속성에 앵커 이름을 지정하고 JavaScript 코드를 추가하여 페이지의 스크롤 위치를 변경할 수 있습니다. 예:

Jump to the first section