Please Enable JavaScript!
Gon[ Enable JavaScript ]

자바스크립트(Javascript) 뒤로 가기 막는 방법

웹 프로그래밍/자바스크립트
반응형

자바스크립트(Javascript) 뒤로 가기 막는 방법

 

보통 다음 페이지로 이동할 때 location.href URL 을 넣어서 이동을 시키게 됩니다. 그럼 뒤로 가기가 가능해 집니다. 브라우저에 뒤로 가기 버튼이 활성화 되죠. 이렇게 뒤로 가기가 되지 않도록 페이지 이동을 시킬 수가 있습니다.

 

어떤 웹 사이트에서는 보안상의 이유로 뒤로 가기가 안되도록 구현하는 곳이 있습니다. 먼저 뒤로 가기가 되는 일반적인 경우를 보겠습니다. 페이지 이동을 위해 버튼을 클릭했을 때 move 함수를 실행하도록 만들었습니다. 페이지 이동은 location.href 를 변수를 사용합니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title>페이지 이동 </title>
</head>
<script type="text/javascript">
	function move(){
		location.href="history02.html";
	}
</script>
<body>
첫 번째 페이지 입니다.<br/><br/>
<input type="button" value="다음 >" onClick="javascript:move();">
</body>
</html>

 

위의 소스를 실행했을 때 이동한 history02.html 페이지에서 웹 브라우저 뒤로 가기 버튼이 활성화 되어 있는 것을 알 수 있습니다. 그러니까 이동이 가능하다는 것이죠.

자바스크립트(Javascript) 뒤로 가기 막는 방법

 

브라우저에 뒤로 가기 버튼을 비활성화 시키려면 이전 이력이 남지 않는 replace 함수를 사용해야 합니다. location 객체의 replace() 함수 파라미터로 이동할 주소를 넣으시면 됩니다.


<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title>페이지 이동 </title>
</head>
<script type="text/javascript">
	function move(){
		location.replace("history02.html");
	}
</script>
<body>
첫 번째 페이지 입니다.<br/><br/>
<input type="button" value="다음 >" onClick="javascript:move();">
</body>
</html>

 

아래 그림처럼 location.replace() 함수를 이용해서 다음 페이지로 이동시키면 상단에 있는 브라우저 이전 버튼은 활성화가 되어 있지 않습니다 

자바스크립트(Javascript) 뒤로 가기 막는 방법

반응형
Posted by 녹두장군1
,