onclick 이벤트로 새 창 띄우기: window.open() 활용법

웹 개발을 하다 보면 onclick 이벤트를 이용하여 location.href='url주소' 형식으로 링크를 거는 코드를 자주 접하게 됩니다. 이 방식은 현재 창에서 링크가 열리는데, 마치 <a> 태그의 target="_blank" 속성처럼 새 창에서 링크를 열고 싶다면 어떻게 해야 할까요?

기본 예제: <a> 태그

먼저, <a> 태그를 사용하여 현재 창과 새 창에서 링크를 여는 방법을 살펴보겠습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS로 새창 연결</title>
</head>
<body>
  <div>
    <h1>anchor 태그로 연결</h1>
    <ul>
      <li><a href="https://daum.net">다음 연결(현재창)</a></li>
      <li><a href="https://daum.com" target="_blank">다음 연결(새창)</a></li>
    </ul>
  </div>
</body>
</html>

Javascript를 이용한 링크: onclick과 location.href

<a> 태그와 동일한 동작을 Javascript로 구현해 보겠습니다. onclick 이벤트와 location.href를 사용하면 됩니다.

HTML

<div>
  <h1>Javascript로 연결</h1>
  <ul>
    <li><p onclick="location.href='https://daum.net'">다음 연결(현재창)</p></li>
  </ul>
</div>

위 코드는 <p> 태그를 클릭하면 현재 창에서 다음(DAUM) 페이지로 이동합니다.

새 창에서 링크 열기: window.open() 활용

이제 onclick 이벤트를 사용하여 새 창에서 링크를 열어보겠습니다. window.open() 함수를 이용하면 간단하게 구현할 수 있습니다.

HTML

<div>
    <p onclick="window.open('https://daum.net')">다음 연결(새창)</p>
</div>

window.open() 함수는 새로운 브라우저 창 (또는 탭) 을 열고 지정된 URL을 로드합니다.

onclick 이벤트 활용의 다양성

onclick 이벤트는 단순히 링크를 여는 것 외에도 다양한 용도로 활용할 수 있습니다. 마우스 클릭 이벤트는 사용자 인터랙션의 기본이기 때문에 웹 페이지의 다양한 요소에 onclick 이벤트를 적용하여 동적인 기능을 구현할 수 있습니다.

<a> 태그 vs. onclick 이벤트

<a> 태그는 HTML에서 기본적으로 제공하는 링크 기능을 위한 태그입니다. 반면 onclick 이벤트는 <a> 태그를 포함한 다양한 HTML 요소에 적용하여 클릭 이벤트를 처리할 수 있다는 장점이 있습니다.

마치며

onclick 이벤트를 사용하여 새 창에서 링크를 열고 싶다면 window.open() 함수를 활용하면 됩니다. 이를 통해 <a> 태그의 target="_blank" 속성과 동일한 효과를 얻을 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

D.C SKY 정보채널

onclick 이벤트로 새 창 띄우기: window.open() 활용법