안드로이드 개발 팁

안드로이드 웹뷰 뒤로가기 할때 체크 방법

안드로이 2023. 3. 8. 14:11

보통 하이브리드앱에서

 

뒤로가기는 window.history.back();  이 자바스크립트를 많이 사용하는데

 

단순히 페이지 이동이 아니라, 어떤 페이지 위에 레이어를 올려서 표시하는 경우

 

잘 동작하지 않는 경우가 있다.

 

이때 "뒤로가기"를 했을 경우 판단하는 로직을 이용해야한다.

 

if (document.addEventListener) {
	window.addEventListener('pageshow', function (event) {
		if (event.persisted || window.performance && window.performance.navigation.type == 2) { // 뒤로가기로 이동시
			
		}
	}, false);
}

 

참고:  https://ddasi-live.tistory.com/93

 

Javascript history.back 체크 이슈

PC나 안드로이드에서는 크게 이슈가 없었지만.. 항상 아이폰에서는 이슈가 생겼다.. 특히 사파리.. history.back 처리를 한 후에 페이지가 정상 동작하지가 않았다.. history.back 한 것을 체크 하여 reload

ddasi-live.tistory.com

 

자바스크립트에서 이용하는 방법은 아래와 같다.

input tag를 hidden으로 하나 만들어 값을 저장하고, 호출하는 방식이다.

이런 방식외에 로컬스토리지에 저장하는 방식도 있다.

 

<script type="text/javascript">

window.onpageshow = function(event) {

    if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {

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

        // 이벤트추가하는곳

		document.getElementById('isBack').value = "OK"; 

        console.log('back button event');

    }

}

</script>

<html> 

	<input type="hidden" id="isBack" value="NO"/>
    
</html>

 

jQuery 에서 사용할때는..

var isBack = $('#isBack').val();
 
if(backValue == 'No'){
    // 초기화 로직

}else{  // 뒤로가기에서 온경우 로직
    $('#isBack').val('NO');  // 기본 설정으로 변경 

}