[TCP School/자바스크립트] 브라우저 객체 모델(BOM) - History 객체
2023. 4. 25. 13:52
history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체이다.
자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있다.
히스토리 목록의 개수
history 객체의 length 프로퍼티는 브라우저 히스토리의 목록 개수를 반환한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>history.length</title>
</head>
<body>
<h1>히스토리 목록의 개수</h1>
<p>아래 버튼을 눌러 새로운 문서를 연 뒤 브라우저의 뒤로가기 버튼 누르기</p>
<button onclick="openDocument()">새로운 문서 열기</button>
<p id="text"></p>
<script>
function openDocument() {
location.assign('http://www.tcpschool.com/javascript/js_bom_history');
}
document.getElementById('text').innerHTML = '현재 브라우저의 히스토리 목록의 개수는 ' + history.length + '개 입니다.';
</script>
</body>
</html>
히스토리 목록 접근하기
history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back() 메소드와 forward() 메소드를 가지고 있다.
또한, go() 메소드를 이용하면 인수로 전달받는 정수만큼 히스토리 목록 사이를 이동할 수 있다.
<button onclick='goBack()'>이전 페이지로 가기</button>
<script>
function goBack() {
window.history.back();
}
</script>위 예제는 back() 메소드를 이용하여 브라우저의 히스토리 목록에서 바로 이전 URL로 이동하는 예제이다.
<button onclick='go()'>이전 페이지로 가기</button>
<script>
function go() {
window.history.go(-1);
}
</script>위 예제처럼 go() 메소드에 인수로 -1을 전달하면 back() 메소드와 같은 동작을 하게 된다.
<button onclick='goForward()'>다음 페이지로 가기</button>
<script>
function goForward() {
window.history.forward();
}
</script>위 예제는 forward() 메소드를 이용하여 브라우저의 히스토리 목록에서 바로 다음 URL로 이동하는 예제이다.
TCP Shcool의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Navigator 객체 (0) | 2023.04.25 |
|---|---|
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Screen 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Location 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Window 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드의 조작 (0) | 2023.04.25 |
