[javascript/php] 브라우저 뒤로가기 기능 제어하기

안녕하세요 김개입니다.

오늘은 javascript history API 기능들을 이용하여

이전페이지 url을 제어하는 방법에 대해 적어보고자 합니다.

 

우선 방법 소개에 앞서 크롬브라우저에서는

물리적 트리거가 없는한 스크립트가

동작되지 않으므로 이점 참고해주셔야합니다.

 

일단 제가 적용한 소스 코드를 통으로 올리겠습니다.

조건은 다음과 같습니다.

1. 기본도메인은 abc.co.kr/폴더1 에서 웹페이지를 보여주고있다.

2. 뒤로가기 클릭시 abc.co.kr/폴더1 -> abc.co.kr/폴더2 로변경한다.

 

제가 생각한방법으로는 뒤로가기 기능이 필요할때에는 사용하고

필요없는경우 끄기위해서 back_switch라는 변수를 만들어

boolean과 같은방식으로 진행하였어요.

 

<?php 

	// 1 = on , 0= off;

	$back_switch = 1;

 

	$now_url = $_SERVER['REQUEST_URI']; //현재주소에서 도메인 제외 폴더1만 가져온다.

	$move_url1 = $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; //현재 사이트주소에 폴더명까지 붙은 통주소를 가져온다.

	$move_url2 = $_SERVER['REQUEST_URI']; //now_url과 동일하지만 쓰임새가 달라서 미리 선언

 

 

	$now_url1 = explode('/', $move_url2, -1); // '/'기준으로 폴더명을 가져와서 맨뒤에서 첫번째 폴더명 즉 
    // /폴더1/폴더2/이런구조일때 폴더2만 가져와서 변경하기위한 코드 explode는 문자열을 분할하여 배열로 저장

	$now_url_end = end($now_url1); // 배열중 마지막 배열을 가져온다.

	if($move_url2 == "/"){ //move_url2가 /일경우와 아닌경우를 if문으로 제어

		if($now_url_end == 'm'){ //마지막폴더명이 m인경우 m을 제거후 폴더2로 변경해주는코드

			$move_array = explode('/', $move_url1, -2);

			$change_array = end($move_array);

			$url_result = str_replace(end($move_array),'폴더2',$move_array);

			$sum_array = implode('/', $url_result);

			$move_url = 'http://'.$_SERVER['SERVER_NAME'].'/'.$sum_array;

	

		}else{

			$move_array = explode('/', $move_url1, -1);

			$change_array = end($move_array);

			$url_result = str_replace(end($move_array),'폴더2',$move_array);

			$sum_array = implode('/', $url_result);

			$move_url = 'http://'.$_SERVER['SERVER_NAME'].'/'.$sum_array;

 

		}

	}else {

		if($now_url_end == 'm'){

			$move_array = explode('/', $move_url1, -2);

			$change_array = end($move_array);

			$url_result = str_replace(end($move_array),'폴더2',$move_array);

			$sum_array = implode('/', $url_result);

			$move_url = 'http://'.$sum_array;

		}else{

			$move_array = explode('/', $move_url1, -1);

			$change_array = end($move_array);

			$url_result = str_replace(end($move_array),'폴더2',$move_array);

			$sum_array = implode('/', $url_result);

			$move_url = 'http://'.$sum_array;

		}

	}
	//그외 코드들은 원리는 비슷합니다. 마지막 http:// 해주는 이유는 프로토콜을 기입해주기위해서
    // 단 https는 안하는이유는 저는 아파치 .htaccess를 이용하여 보안인증서 연결시에는 자동으로 https로 연결되도록 변경조치해두었습니다.
?>

<?php if($back_switch == 1) { ?>

<script>
/* 여기서부터는 스크립트 코드 / 위에서 php로 제작한 주소들을 가져다가 출력하여 사용하였다. */
var now_url = '<?php echo $now_url; ?>'; //현재주소

var move_url = '<?php echo $move_url;?>'; //이동할주소 

console.log(move_url);

window.history.pushState(null, '', location.href); //뒤로가기 활성화를 위해 빈 히스토리를 넣어준다.

 

window.addEventListener('popstate', function(event){ //뒤로가기 클릭 이벤트발생시

	if(window.location.pathname == '<?php echo $now_url; ?>'){
		//도메인이 now_url과 일치할경우 replace를 통해 주소를 이동시켜준다.
		window.location.replace("<?php echo $move_url;?>");

	}else if ( window.location =="<?php echo $move_url;?>")

	{
		//아닌경우 정상적인 이탈처럼보이기위해 두칸 뒤로가기실행
		history.go(-2);

	}		

	history.replaceState(null, '', location.href);
	//replaceState를 해준이유는 안그러면 뒤로가기히스토리가 무한증식해서 제어차 기입.
});

 

window.onpageshow = function(event) {

 

 

 

    if ( event.persisted) {

// Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우

	console.log('뒤로가기요');

    }else {

	}

 

}

 

</script>

<?php } ?>

저도 콘솔로그 및 php로 하나하나 찍어보면서 제작한 코드라...

설명이 좀 미흡하지만 여러분들도 조금만 해보면

금방 이해하실거에요 ㅎㅎ

 

아무리찾아봐도 해결방법이 안나와서 ㅠㅠ