본문 바로가기

Programming/Hybrid App

[Javascript] 아이폰에서 브라우저 백버튼 클릭시 새로고침 안되는 문제.

크롬기반 브라우저 및 안드로이드에서는 

브라우저 백버튼을 클릭하였을 때, 이전 페이지 정보를 refresh 한다.

하지만 IOS 사파리의 경우 그렇지 않다.

페이지에 대한 모든 정보를 사파리에서 저장하고 있기 때문이다.

흔히 Hybrid App, Single Page Web 을 구현하게 되면(일반 web도 마찬가지...),

간혹 로그인 체크라던가, 필요한 데이터를 받기 위해 document 의 ready에서 ajax를 통해 API들을 요청하게 된다.

 하지만 아이폰(사파리)에서 브라우저 백버튼을 눌렀을 때, ready 내의 fuction이 정상 동작하지 않게 된다.

이를 해결하기 위해선 

window 객체의 onpageshow라는 이벤트를 구현해야 아이폰에서 브라우저 백버튼을 눌렀을 때도, 원하는 결과를 얻을 수 있다.


//javascript 만을 이용한 방법
window.onpageshow =  function(event) {
			
			//back 이벤트 일 경우
	if ( event.persisted) {
				
		//====TODO : 
	}
			
}
//jQuery를 이용한 방법
$(window).bind("pageshow", function(event) {
	
	//back 이벤트 일 경우
	if ( event.originalEvent && event.originalEvent.persisted) {
		
		//TODO : ======
	}
	
});


jQuery를 이용할 때, event.originalEvent를 체크하는 이유는

브라우저에서 발생시킨 event 내에 event.originalEvent 가 없을 수 있기 때문에

존재하는지 체크를 먼저하게 된다.

그리고 persisted 를 통해, 이 이벤트가 백버튼(실제로는 continue의 느낌이 강함..)에 대한

이벤트인지 확인 할 수 있다(boolean 형태)