관심분야/iOS

인앱 Webview 안에서 외부 Host접근 때 컨트롤 UI제공 하는 간단한 방법

도르님 2019. 7. 12. 11:23

 

하이브리드 웹뷰가 대세 인 지금 별도 NativeUI 없이 강력한 WebUI안에서 모든 기능을 제공하지만

소셜SDK , 간단한게시형 웹뷰 등 여러  와 연동하여 외부 Host주소로 이동되는 경우가 발생합니다.

아래 상황은 Naver Oauth 사용 중 네이버에서 페이지 컨트롤UI를 제공 하지 않는 상황입니다.

 

소셜 로그인 창은 왔는데, 취소할수가 없다!!

 

 

이런 상황은 빈번히 발생합니다. 

간단한 네비게이션바를 위에 올려서 자체 운영되는 Host가 아니면 HistoryBack() 이벤트와 메인 Host로 이동하는 컨트롤 UI를 제공합니다.

 

네이버가 제공하지 않는 뒤로가기를 상단에 붙여 자연스럽게 이동가능한 UI를 제공!

 

 

자체 Host에서는 어떤 화면을 예상하고 컨트롤UI를 제공하지만, 예상할 수 없는 웹페이지에서 제어할 수 없는 예외 페이지를 위해

간단한 코드로 내비게이션 바를 제공해 보겠습니다.

Swift 버전 / WKWebView를 활용하여 트렌디하게 예제 코드를 작성해 보았습니다.

 

 

제약 조건은 간단합니다. 상단 NavigationBar 를 상단 TopSafeArea 아래 전체는 Webview 영역으로 잡아 줍니다.

 

naviHeightConstraint라는 변수로 내비게이션 바의 높이를 컨트롤할 수 있는 Constraint 변수를 만들어 줍니다.

 

컨트롤할 수있게 클래스로 변수 선언과, 초기화를 합니다. Back / Home 버튼도 각 Left, Right Item으로 잡아 줍니다. 

 

 

정말 간단합니다. 자체Host (ex) https://www.shinhansys.co.kr)가 아닌 외부 Host는 모두 컨트롤 내비게이션 바를 높이를 잡아 줍니다.

UIWebView 기준으로 shouldStartLoadWithRequest를 대체한 함수입니다. UIWebView 사용 시 참고하시면 됩니다.

 

이렇게 마치 웹에서 제공할 것 같은 UI를 자연스럽 네이티브UI를 제공합니다. 모든UI를 Webview안에 담았지만, 이러한 예외 상황에

유용하게 처리 가능한 방법입니다.