<!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

[JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 )