HTML history.back, history.go()

웹 브라우저 간에 페이지 이동 기능이 있는데 이번 포스팅에서는 뒤로가는 기능에 대해 알아보려 합니다.

대표적으로 history.back()과 history.go() 기능이 있습니다.

둘의 기능은 홈페이지를 이동시키는 기능이 있는데요, history.back()은 현재 페이지 기준으로 이전페이지로 돌아가는 기능이 있습니다.

history.go()는 history.back()과는 다르게 현재 페이지 기준 앞의 페이지로, 또는 이전페이지로 이동할 수 있습니다.

사용방법은 history.go(숫자)인데, 음수를 넣으면 이전페이지로, 양수를 넣으면 앞의 페이지로 이동합니다.

예제를 통해 확인해보겠습니다.

1. history.back(), history.go()

페이지 1부분,

<!-- 페이지 1 -->

<body>
	<h1>페이지1</h1>
	<input type="button" value="다음페이지" onclick="nextPage()">
	
<script>
	function nextPage() {
		location.href="test2.html"
	}
</script>
</body>

페이지 2부분,

<!-- 페이지 2 -->

<body>
	<h1>페이지2</h1>
	<input type="button" value="다음페이지" onclick="nextPage2()">
	<input type="button" value="history.back()" onclick="history_back()">
	<input type="button" value="history.go(-1)" onclick="history_go1()">
	
<script>
	function nextPage2() {
		location.href="test3.html"
	}
	function history_back() {
		history.back();
	}
	function history_go1() {
		history.go(-1);
	}
</script>
</body>

페이지 3부분입니다.

<!-- 페이지 3 -->

<body>
	<h1>페이지3</h1>
	<input type="button" value="history.back()" onclick="history_back()">
	<input type="button" value="history.go(-1)" onclick="history_go1()">
	<input type="button" value="history.go(-2)" onclick="history_go2()">
	
<script>
	function history_back() {
		history.back();
	}
	function history_go1() {
		history.go(-1);
	}
	function history_go2() {
		history.go(-2);
	}
</script>
</body>

맨 먼저 페이지 1부분을 실행시켜보겠습니다.

페이지 1부분입니다. 다음페이지를 클릭하면,

페이지 2라는 페이지가 열리며, 다음페이지로 갈지, history.back(), history.go(-1)의 버튼을 볼 수 있습니다.

두번째 버튼, 세번째 버튼을 누르면 페이지 1로 돌아가게 됩니다.

그리고 다음페이지로 가면,

예제의 마지막 페이지인 3페이지로 가는 것을 볼 수 있습니다.

페이지2와 마찬가지로 페이지3 또한 history.back(), history.go(-1)을 누르면 페이지 2로 돌아가게 됩니다.

마지막으로 여기서 history.go(-2)를 클릭하면,

다시 페이지 1로 돌아오는 것을 확인 할 수 있습니다.

2. 둘의 차이점

history.back()은 history.go()처럼 소괄호 안에 숫자를 넣는다고 해서 넣은만큼 작동하지 않습니다.

넣지 않아도 이전페이지로만 이동하며, 넣는다고해도 오류가 뜨지 않고 그저 이전페이지로만 이동합니다.

반대로 history.go()는 소괄호 안에 입력한 숫자만큼 이동하는 것을 확인할 수 있습니다.

'코딩 > HTML' 카테고리의 다른 글

HTML data 속성 (0)	2020.09.16
Attribute, Property (0)	2020.07.16
html label (0)	2020.07.03
html ol, ul (0)	2020.07.01
HTML div, span, p이란? (0)	2020.06.25