반응형
자바스크립트로 동적인 페이지를 만들 때 페이지 이동에 대한 여러 작성 방법이 있다.
각 코드의 사용법과 기능을 알아보겠다.
location.href = '링크'
location 객체에 있는 href 프로퍼티가 있다. 이를 활용하는 방법이다.
현재 페이지 상태에서 새로운 링크로 이동한다. 새 창이 띄어지지 않고 단순히 url이 변경된다.
히스토리에 남기 때문에 뒤로 가기를 해도 이전 페이지로 이동이 가능하다.
- location.href
현재 페이지 경로를 반환
- location.href = '링크'
다른 페이지(링크)로 이동
<div onClick="location.href = 'https://realzzu.tistory.com/'">hello</div>
console.log(location.href); // https://realzzu.tistory.com/
location.replace('링크')
replace는 위와 다르게 method이다.
현재 페이지를 새로운 페이지로 덮어 씌우기 때문에, '뒤로 가기'의 이전 페이지 이동이 불가하다. 히스토리가 기록되지 않는다.
주로 쇼핑몰 결제와 같이 뒤로가기를 통해 url에 접근할 수 없게 막을 때 사용한다.
<div onClick="location.replace('https://realzzu.tistory.com/')">Hello</div>
window.open('링크')
새 창으로 페이지를 띄우는 방법이다.
<div onClick="window.open('https://realzzu.tistory.com/')">Hello</div>
https://developer.mozilla.org/en-US/docs/Web/API/Location/href
location: href property - Web APIs | MDN
The href property of the Location interface is a stringifier that returns a string containing the whole URL, and allows the href to be updated.
developer.mozilla.org
반응형
'Front-end > JavaScript' 카테고리의 다른 글
| <input> 이벤트의 실행 순서는? onChange, onKeyDown, onKeyPress, onKeyUp, onInput (0) | 2024.01.29 |
|---|---|
| [JS] 변수가 왜 '암묵적'으로 undefined로 초기화가 된다는 걸까? (0) | 2023.12.10 |
| [JS] javascript:void(0)란? (0) | 2023.06.07 |
| [JS] this란? 바인딩 및 일반 함수 vs 화살표 함수 알아보기 (0) | 2023.06.01 |
| [JS] 정규식 안에 변수 넣기 (0) | 2023.03.23 |
