페이지 이동 관련 코드 [document.referrer / history.back / history.go(index)]

홈페이지 만들 때, 페이지 이동 관련 코드를 사용해야하는 경우가 있다.

그 중 document.referrer 과 history.back 과 history.go가 있는데 이 세개의 차이점에 대해 알아보았다.

 

document.referrer 과 history.back 과 history.go(index) 의 공통점

이 세개 코드의 공통점은 페이지 이동이다.

document와 history는 웹 브라우저에서 제공하는 내장객체이다. 

 

document.referrer

document 오브젝트의 한 속성으로

document.refferer는 단순하게 이전페이지의 url 값이다.

 

history.back / history.go(index)

history 오브젝트에 들어있는 값들 중 저장된 주소로 옮기는 메서드이다.

history 개체는 처음 브라우저를 열어서 현재 페이지 까지 이동된 주소 리스트를 갖고있다.

따라서 history 안에 있는 메서드인 history.back 이나 history.go(index) 를 사용하면

실제로 페이지를 이동시킬 수 있다.

 

history.go(index) 같은 경우

index 부분에 -1, -2 를 삽입하는데

이전 페이지 목록 중 첫번째 두번째 페이지로 이동하라는 의미를 가지고 있다.

history 는 이동한 페이지 리스트만 갖고있으므로 한번도 접근하지 않은 페이지는 이동할 수 없다.

 

history.back() 같은 경우

현재 페이지의 이전 페이지로 이동한다.

 

IE 브라우저 같은 경우

history 코드가 먹히지 않는 경우가 있다.

그럴때에 아래와 같은 방법을 사용한다.

a 태그에 return false 를 추가한다.

<a href="#" onclick="history.back(); return false;"> 이동 </a>
<a href="#" onclick="history.go(-1); return false;"> 이동 </a>
<a href="#" onclick="javascript:history.go(-1); return false;"> 이동 </a>

 

history 내장 객체 코드 예시

- history.back() : 이전 페이지로 이동

- history.go(0) : 현재 페이지 리로드

- history.go(-1) : history.back() 과 동일하게 이전페이지로 이동

- history.go(-2) : 2단계 전 페이지로 이동

<a type="button" onclick="javascript:location.href='javascript:history.go(-1);'">이전으로</a>