[Javascript] 자바스크립트 브라우저 객체 모델 - History 객체

브라우저 객체 모델(BOM)이란?

• 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
• 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

History 객체란?

• history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체다.
• 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있다.

 

History 메소드

히스토리 목록의 개수

• history 객체의 length 프로퍼티는 브라우저 히스토리 목록의 개수를 반환한다.

function openDocument() {
    location.assign("/javascript/js_bom_history");
}

document.getElementById("text").innerHTML =
"현재 브라우저의 히스토리 목록의 개수는 " + history.length + "개 입니다.";

히스토리 목록 접근하기

• history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back()과 forward() 메소드를 가지고 있으며, go() 메소드를 이용하면 인수로 전달받는 정수만큼 히스토리 목록 사이를 이동할 수도 있다.

/* back() 메소드를 이용하여 브라우저의 히스토리 목록에서 바로 이전 URL로 이동 */

<button onclick="goBack()">이전 페이지로 가기</button>

<script>
    function goBack() {
        window.history.back();
    }
</script>

/* go() 메소드를 이용하여 back() 메소드와 같은 동작 */
/* go() 메소드에 인수로 -1을 전달하면 back() 메소드와 같은 동작 */

<button onclick="go()">이전 페이지로 가기</button>

<script>
    function go() {
        window.history.go(-1);
    }
</script>

/* forward() 메소드를 이용하여 브라우저의 히스토리 목록에서 바로 다음 URL로 이동 */

<button onclick="goForward()">다음 페이지로 가기</button>

<script>
    function goForward() {
        window.history.forward();
    }
</script>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/