728x90
반응형
자바스크립트 페이지 이동
함수 및 속성
자바스크립트에서 꼭 필요하고 자주 사용되는 페이지 이동에 관련되어 포스팅하려고 한다.
가장 보편적인 3가지로 나눠봤다.
1. location.href 속성 사용
가장 일반적인 방법은 location.href 속성을 사용.
이 방법은 현재 페이지를 다른 페이지로 대체하며, 웹 브라우저의 주소 표시줄에 새 URL이 표시된다.
index.html ----> home.html 이동
[index.html]
<!DOCTYPE html>
<html>
<body>
<a id="myLink" href="#">Click</a>
<script>
document.getElementById("myLink").onclick = function() {
location.href = "home.html";
};
</script>
</body>
</html>728x90
[home.html]
<!DOCTYPE html>
<html>
<body>
<h1>홈페이지 이동</h1>
</body>
</html>
2.window.location.replace() 함수 사용
또 다른 방법으로는 window.location.replace() 함수를 사용.
이 방법은 현재 페이지를 새 페이지로 대체하고, 뒤로 가기 버튼을 사용하여 이전 페이지로 돌아갈 수 없도록 한다.
[index.html]
<!DOCTYPE html>
<html>
<body>
<a id="myLink" href="#">Click</a>
<script>
document.getElementById("myLink").onclick = function() {
window.location.replace("home.html");
};
</script>
</body>
</html>위 코드에서 "myLink"는 링크를 클릭하는 요소의 ID이며, "home.html"은 이동할 페이지의 URL.
클릭 시 현재 페이지를 새 페이지로 대체하고, 뒤로 가기 버튼을 사용하여 이전 페이지로 돌아갈 수 없게 된다.
3. location.assign() 함수 사용
마지막으로 location.assign() 함수를 사용할 수 있다.
이 함수는 현재 페이지를 새 페이지로 대체하며, 이전 페이지로 돌아갈 수 있도록 브라우저의 기록에 새 항목을 추가한다.
[index.html]
<!DOCTYPE html>
<html>
<body>
<a id="myLink" href="#">Click</a>
<script>
document.getElementById("myLink").onclick=function(){
location.assign("home.html");
}
</script>
</body>
</html>위 코드에서 "myLink"는 링크를 클릭하는 요소의 ID이며, "home.html"은 이동할 페이지의 URL.
클릭 시 현재 페이지를 새 페이지로 대체하고, 뒤로 가기 버튼을 사용하여 이전 페이지로 돌아갈 수 있게 된다.
결과
[index.html]
[home.html]
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 배열 메서드 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.22 |
|---|---|
| [JavaScript] 눈 내리는 효과 HTML, CSS | 민민의 하드디스크 - 티스토리 (0) | 2023.05.16 |
| [JavaScript] 자바스크립트 웹 출력하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.15 |
| [JavaScript] 자바스크립트 심볼(Symbol)이란? | 민민의 하드디스크 - 티스토리 (0) | 2023.05.14 |
| HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.12 |
