링크를 클릭할 때 페이지를 새 창에서 열거나, 현재 창에서 여는 방법에 대해서 알아보겠습니다.

새창에서 열기, 현재 창에서 이동

링크나 버튼을 클릭할 때 현재 창에서 URL로 이동하거나 새창에서 페이지를 실행시키는 예제입니다.

HTML

  • 링크(<a/>)처럼, HTML에 href으로 URL을 설정하면, 링크 클릭 시 현재 페이지에서 URL로 이동
  • 버튼1과 버튼2는 Javascript 함수가 실행되도록 설정, 각 함수에서 현재 페이지에서 이동하거나 새창에서 이동하도록 구현
<a id="moveLink" href="https://www.naver.com">링크</a>

<button id="moveButton1">버튼1</button>
<button id="moveButton2">버튼2</button>

Javascript

moveButton1 버튼을 누르면, 함수에서 window.location.href = url 처럼 URL을 설정하며, 이렇게 구현하면 현재 창에서 페이지로 이동합니다.

window.location.href는 현재 페이지의 주소를 의미하며, 이 값을 변경하면 변경된 URL로 이동합니다.

moveButton2 버튼을 누르면, 함수에서 window.open(url)를 호출하며, 이렇게 구현하면 새 창에서 페이지를 실행시킵니다.

window.open()은 인자로 URL을 받으며, 다른 인자도 받을 수 있습니다. URL만 전달하면 새 창으로 URL 페이지를 실행합니다.

const moveButton1 = document.getElementById('moveButton1');
moveButton1.addEventListener('click', function() {
  const url = 'https://www.naver.com';
  window.location.href = url;
});

const moveButton2 = document.getElementById('moveButton2');
moveButton2.addEventListener('click', function() {
  const url = 'https://www.naver.com';
  window.open(url);
});