[JavaScript]다양한 방법으로 페이지 이동시키기(페이지 관련 함수)

 

 

안녕하세요 무택입니다 :)

오늘은 js에서 다양한 방법으로 페이지 이동시키는 방법에 대해 써보려고 합니다. 대체적으로 필요하지 않은 기능이지만 상황에 따라 필요할 수 있기 때문에 참고 삼아서 '이런 것도 있구나'정도로 봐주시면 좋을 것 같습니다.

 

 

HTML

<button class="href">페이지 이동(현재창)</button>
<button class="href_02">페이지 이동(새창)</button>
<button onclick="window.location.href='https://www.pinterest.co.kr/'">onclick 페이지 이동(현재창)</button>
<button onclick="window.open('https://www.pinterest.co.kr/')">onclick 페이지 이동(새창)</button>

 

JS

var button = document.querySelector('.href');
button.addEventListener("click", function(){
  window.location.href = "https://www.pinterest.co.kr/";
});

var button_02 = document.querySelector('.href_02');
button_02.addEventListener("click", function(){
  window.open('https://www.pinterest.co.kr/')
});

Codepen

See the Pen [JS]페이지 이동시키는 기능 by TytanLee (@TytanLee) on CodePen.

 

 

 

'현재창에서 이동'은 codepen 시스템상 제대로 작동하지 않지만 실제 코드에서는 작동이 잘 됩니다😀

 

 

페이지 이동시킬 수 있는 방법

방법 1 - window.location.href(현재창에서 이동)

스크립트 내부에서 사용이 가능한 코드입니다.

사용 방법 : `window.location.href = "이동할 주소";`

var button = document.querySelector('.href');
button.addEventListener("click", function(){
  window.location.href = "https://www.pinterest.co.kr/";
});

 

 

방법 2 - window.open(새창으로 이동)

마찬가지로 스크립트 내부에서 사용이 가능한 코드입니다.

사용 방법 : `window.open('이동할 주소');`

var button_02 = document.querySelector('.href_02');
button_02.addEventListener("click", function(){
  window.open('https://www.pinterest.co.kr/')
});

 

방법 3 - HTML코드 내 window.location.href(현재창에서 이동)

HTML 내부에서 onclick을 이용해 사용이 가능한 코드입니다.

사용 방법 : `onclick="window.location.href='이동할 주소'"`

<button onclick="window.location.href='https://www.pinterest.co.kr/'">onclick 페이지 이동(현재창)</button>

 

 

방법 4 - HTML코드 내 window.open(새창으로 이동)

마찬가지로 HTML 내부에서 onclick을 이용해 사용이 가능한 코드입니다.

사용 방법 : `onclick="window.open('이동할 주소')"`

<button onclick="window.open('https://www.pinterest.co.kr/')">onclick 페이지 이동(새창)</button>

 

사실상 코드 넣는 위치만 다를 뿐 HTML, JS에 들어가는 코드는 똑같되 약간의 변형만 있습니다.

주의할 점은 이동할 주소 형식은 https:// 이런 식으로 시작해야 합니다.

위 주소를 빼면 '현재 주소/코드'가 들어가서 제대로 이동이 안될 수 있습니다. (ex.www.codepen.com/이동할 주소)

그 외 페이지 이동 관련 함수

history.back()	페이지 뒤로 가기
history.forward()	페이지 앞으로 가기
location.reload()	페이지 새로고침
location.href	현재 페이지 주소 값 리턴

 

---

.

.

하루에도 수많은 콘텐츠를 접하는 시대, 어떻게 사람들의 마음을 사로잡을 수 있을까요?

감성적인 이미지와 디자인으로 한눈에 스크롤을 멈추게 하는 카드뉴스가 답입니다.

그럼 어떻게 감성적인 카드뉴스를 손쉽게 만들 수 있을까요?

 

바로 감성적인 카드뉴스 디자인 템플릿을 활용하세요😊

 

이번에 제가 카드뉴스 템플릿을 만들었습니다. 가장 사용성이 좋은 디자인으로 29종을 만들어봤는데, 템플릿을 사용하면 전문가 수준의 디자인을 손쉽게 완성할 수 있습니다.

 

아래에서 이미지와 링크를 확인할 수 있으니 감성적인 카드뉴스를 제일 먼저 만나보세요!

감성적인 SNS 운영을 위한 카드뉴스 템플릿 29종 - 크몽