반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>index2로 이동하기</h1>
<button onclick="hrefLink()">href</button>
<button onclick="replaceLink()">replace()</button>
<script type="text/javascript">
link = 'index2.html';
function hrefLink() {
location.href = link;
}
function replaceLink() {
location.replace(link);
}
</script>
</body>
</html>html에서는 <a href> tag 혹은 <from action=""> submit button을 이용해서 페이지를 이동시킬 수 있다.
JasvaScript에서 페이지 이동은 location.replace(), location.href 가 있다.
index2로 이동하기
location.replace('link')
현재 페이지를 덮어 씌우기 때문에 replace를 사용해서 페이지를 넘어가게 되면 이전 페이지로 돌아갈 수 없다.
location.href
<a href> tag와 동일하게 페이지 이동을 하는 메서드 이다. replace()와 다르게 이전 페이지로 돌아갈 수 있다.
window.open('link')
새창으로 열기
<a href="" target="_blink">동일하다.
<form action=""> vs JavaScript 페이지 이동
form의 경우 input type의 값을 채우지 않고 빈칸인 상태에서 submit을 누르게 되면 빈칸인 상태로 이동이 된다.
JS의 경우 조건문을 통해서 빈칸인 경우 이동을 못하게 제어할 수 있다.
반응형
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [JavaScript] DOM이란? JavaScript로 html 태그 추가(JavaScript를 사용해 DOM에 새로운 노드 추가, childNodes) (0) | 2021.06.08 |
|---|---|
| [JavaScript]이벤트 리스너(event listener) (0) | 2021.06.07 |
| [JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') ) (0) | 2021.06.07 |
| [JavaScript] id, class, name 식별자 예제를 통해서 확인하기 (0) | 2021.06.07 |
| [JavaScript] html 문서에 JavaScript를 포함할때 어떻게 포함하는게 효율적일까? (head,body,defer, async) (0) | 2021.06.07 |