[Javascript] 버튼 클릭 시 페이지 이동하기, 새창에서 열기

 

HTML에서 페이지를 이동할 때는 보통 <a> 태그를 사용하여 링크를 만듭니다.

그렇지만, 버튼을 클릭했을 때, 다른 페이지로 이동하고 싶다면 어떻게 해야할까요?

 

 

버튼 클릭시 페이지 이동하기

<input 
  id='go_home'    
  type='button'
  onclick='newPage()'
  value='이 버튼을 클릭하면 블로그 홈으로 이동합니다.' />

function newPage()  {
  window.location.href = 'https://hianna.tistory.com'
}

 

window.location.href = 'https://hianna.tistory.com';

버튼에 onclick 이벤트가 발생하면, newPage() 함수가 호출되고,

이 함수는

window.location.href 값을 새로운 페이지로 변경합니다.

window.location.href는 현재 열려 있는 페이지 주소를 담고 있는 속성입니다.

여기서는 페이지를 이동하기 위해 이 값을 바꾸어 주었습니다.

 

window.location의 다른 속성들에 대해 더 자세히 알고 싶다면

아래의 지난 포스팅을 참조하세요.

[Javascript] 현재 페이지 URL 가져오기

[Javascript] 현재 페이지 URL 가져오기

 

버튼 클릭시 다른 페이지를 새창에서 열기

<input 
  id='go_home'    
  type='button'
  onclick='newPage()'
  value='이 버튼을 클릭하면 새탭(새창)에서 블로그홈이 열립니다' />

function newPage()  {
  window.open('https://hianna.tistory.com');
}

 

window.open('https://hianna.tistory.com');

window.open 함수는 첫번째 파라미터로 받은 url을 새창에서 열어줍니다.