onclick="location.href='url주소' " 새 창으로 띄우려면? target="_blank" ?
기존에 작성된 개발코드를 살펴볼 때 onclick=""이벤트를 사용해서 location.href='url주소'를 이용해서 링크하는 경우를 종종 만나게 됩니다.
대충 살펴보자면, 클릭했을때 location에 대한 hyperlink reference를 옆에 적어 둔 url주소를 참조하라는 것이라고 짐작할 수가 있겠습니다. 그런데, location.href는 동작방식이 현재 열려진 브라우저 창에서 동작하게 됩니다.
그렇다면, <a> 엘리먼트를 사용할 때 처럼 target="_blank"을 주려면 어떻게 하면 좋을까요?
예제코드
아래와 같은 HTML 예제코드로 시작해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS로 새창 연결</title>
</head>
<body>
<div>
<h1>anchor 태그로 연결 </h1>
<ul>
<li>
<a href="https://naver.com">네이버 연결(현재창)</a>
</li>
<li>
<a href="https://naver.com" target="_blank">네이버 연결(새창)</a>
</li>
</ul>
</div>
</body>
</html>
여기까지가 HTML의 <a> 태그, 즉 anchor 태그를 이용해서 현재창에 링크를 연결하거나, 새창으로 연결하는 방법이죠?
이와 동일한 동작을 Javascript로는 어떻게 구현을 하는 지 살펴보기로 합니다. 막상 알고 나면 쉽습니다.^^
onclick="location.href='url주소'
서두에서 잠깐 언급했지만, onclick을 담고 있는 HTML 엘리먼트에 클릭 이벤트가 발생하면, location.href에 의해 브라우저 주소창에 url주소가 들어가게 되어 링크되는 방식입니다. html 코드에 아래와 같이 추가를 해봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS로 새창 연결</title>
</head>
<body>
<div>
<h1>anchor 태그로 연결 </h1>
<ul>
<li>
<a href="https://naver.com">네이버 연결(현재창)</a>
</li>
<li>
<a href="https://naver.com" target="_blank">네이버 연결(새창)</a>
</li>
</ul>
</div>
<div>
<h1>Javascript로 연결</h1>
<ul>
<li>
<p onclick="location.href='https://naver.com'">네이버 연결(현재창)</p>
</li>
</ul>
</div>
</body>
</html>
클릭을 해보면, <a> 태그를 적용했던 것과 동일하게 현재창에서 네이버 페이지가 호출됩니다.
자, 그러면 새창으로 링크를 연결할 때는 어떻게 하면 좋을까요?
onclick="window.open('url주소')"
html 코드에 아래와 같이 추가를 해봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS로 새창 연결</title>
</head>
<body>
<div>
<h1>anchor 태그로 연결 </h1>
<ul>
<li>
<a href="https://naver.com">네이버 연결(현재창)</a>
</li>
<li>
<a href="https://naver.com" target="_blank">네이버 연결(새창)</a>
</li>
</ul>
</div>
<div>
<h1>Javascript로 연결</h1>
<ul>
<li>
<p onclick="location.href='https://naver.com'">네이버 연결(현재창)</p>
</li>
<li>
<p onclick="window.open('https://naver.com')">네이버 연결(새창)</p>
</li>
</ul>
</div>
</body>
</html>
위 이미지에서처럼, 새창(=새탭)으로 네이버로 링크되는 것을 확인할 수 있습니다.
window.open() 함수를 통해, 새창을 열 수 있다는 사실은 이미 알고 있던 내용일 확률이 많을겁니다.^^ 다만 초보자 입장에서는 Javascript를 자주 사용하지 않다보니, onclick과 연계해서 사용하는 방식이 익숙치 않았을 겁니다.
사실 onclick은 이벤트 핸들러이기 때문에, 링크를 연결하는 것 이외에도 매우 다양하게 활용할 수 있는 기능입니다. 웹 문서에서 사용자 인터렉션에서는 마우스 버튼 클릭이 아주 기본적인 이벤트가 되니까요.
마치며
anchor 태그는 HTML 자체적으로 하이퍼 링크 기능을 제공하는 엘리먼트 태그 입니다. <a> 태그는 처음부터 '클릭' 하기 위해서 존재하는 것이죠. 반면에, Javascript로 다루는 onclick 이벤트는 <a> 태그 이외의 다양한 태그들에서도 사용될 수가 있다는 점이 가장 큰 차이점이 될 것입니다.
즐거운 코딩생활, 즐코딩.
KINcoding.
'Javascript' 카테고리의 다른 글
| sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리 (0) | 2023.02.27 |
|---|---|
| 배열 객체 메서드 sort(), filter(), map() 기초 정리 (0) | 2023.02.26 |
| 콜백 함수(Callback Function)는 뭘까? Please Call Me (0) | 2023.02.25 |
| sort() 메서드로 상품 정렬 기능 만들기 (0) | 2023.02.24 |
| 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 (2) | 2023.02.23 |
댓글