50. (javascript/자바스크립트) history 사용해 히스토리 목록 개수 확인, 페이지 앞으로가기 (forward) 및 뒤로가기 (back) 수행

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]
    	1. history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다
    	2. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다
    	3. history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back()과 forward() 메소드를 가집니다
    	4. includes : 특정 문자 값이 포함된 것을 확인합니다
    	5. main(this) : main 함수를 호출하면서 자기 자신 id를 넘겨줍니다
    	6. tagId.id : 매개변수로 들어온 객체의 id 값을 확인합니다    	
    	*/
    	    	
    	
    	/* 이벤트 함수 정의 */
    	function main(tagId) {
    		
    		/* 매개변수로 들어온 태그 id 확인 실시 */
    		console.log("태그 id : " + tagId.id);
    		
    		
    		/* 히스토리 목록 개수 확인 */
    		var historyCount = history.length;
    		console.log("히스토리 개수 : " + historyCount);
    		
    		
    		/* id 값 체크 및 로직 분기 처리 실시 */
    		if(tagId.id.includes("go") == true){
    			console.log("로직 : " + "앞으로 가기 이동");
    			// 히스토리 앞으로 가기 수행
    			window.history.forward();
    		}
    		else {
    			console.log("로직 : " + "뒤로 가기 이동");
    			// 히스토리 뒤로가기 수행
    			window.history.back();
    			//window.history.go(-1);
    		}
    		
    	};  	    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다

2. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다

3. history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back()과 forward() 메소드를 가집니다

4. includes : 특정 문자 값이 포함된 것을 확인합니다

5. main(this) : main 함수를 호출하면서 자기 자신 id를 넘겨줍니다

6. tagId.id : 매개변수로 들어온 객체의 id 값을 확인합니다

*/

/* =========================== */