몇년 만인지 밤을 새면서 개발을 할 만큼 바쁜 한달이 지나가고 있습니다. ㅜㅜ 덕분에?! 생활이 엉망진창이 되었지만;; 이제 다시 여유가 조금 생겨 정리 차원에서 이렇게 글을 쓰고 있습니다.
이전 글에서 적었듯이 하이브리드로 개발을 하면서 웹을 iframe 넣어 세상에는 없는(있으면 안되는) 앱이 만들어졌습니다
iOS와 관련된 부분들을 정리하고 Android로 정리해 볼 생각입니다.
1. iframe 관련
<ion-content scroll="false"> <ion-content overflow-scroll="true" style="position:fixed;" on-scroll="getScrollPosition()"> <iframe data-tap-disabled="true" header-shrink id="mobile_web" src="{{webUrl}}" style="left:0;top:0;height:100%;width:100%;background-color:#fff;" onLoad="uploadDone()" ></iframe> </ion-content> </ion-scroll>
<div class="bar bar-footer"> </div> </ion-content> |
- footer에 네비게이션을 넣기 위해서 <ion-content> 태그를 중복으로 사용하였습니다.
- iframe내의 컨텐츠에 스크롤을 위해서 overflow-scroll=true로 지정하였으며 본문만 스크롤이 되어야 하므로 부모 <ion-content>에 scroll=false로 지정을 하였습니다.
- iOS에서 iframe내의 스크롤이 내려갈 때 헤더부분에 백그라운드 색을 변경하는 해당 이벤트는 on-scroll 지시어를 통해서 가능합니다. iOS에서 스크롤 관련된 부분(현재 높이라던가)은 $ionicScrollDelegate를 활용하시면 됩니다.
- iframe의 backgournd-color가 ionic의 스타일 때문인지 회색 계열로 보여 흰색으로 지정하였습니다.
- css와 관련된 설정은 아래와 같습니다.
색으로 표시한 부분이 ionic css에서 변경한 부분입니다. iframe내의 컨텐츠에 대한 사이즈와 연관된 부분으로 가로 스크롤이 가능하게 하려면 overflow:auto로 변경해줘야 하며 다음, 네이버 모바일 화면을 넣어봤는데 일부 화면에 대한 가로 사이즈를 맞춰주려면 width: 100%줘야합니다. 다음의 경우 기사를 클릭하면 사이즈 문제가 발생하며 네이버의 경우에는 일부 화면에서 가로 사이즈가 조금 짧게 표시되는거를 제외하고는 대부분 브라우저와 동일하게 표시됩니다..overflow-scroll {
overflow:auto;
-webkit-overflow-scrolling: touch;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute; }
.overflow-scroll .scroll {
position: static;
height: 100%;
width: 100%;
-webkit-transform: translate3d(0, 0, 0); }
data-tap-disabled=true 속성은 디바이스에서 터치와 네이티브, 자바스크립트 스크롤과 관련된 부분입니다. 자세한 내용은 해당 속성으로 검색하시면 ionic 사이트에 설명되어 있습니다.
|
- (void)open:(CDVInvokedUrlCommand*)command { // if ([target isEqualToString:kThemeableBrowserTargetSelf]) { // [self openInCordovaWebView:absoluteUrl withOptions:options]; // } else if ([target isEqualToString:kThemeableBrowserTargetSystem]) { // [self openInSystem:absoluteUrl]; // } else { // _blank or anything else [self openInThemeableBrowser:absoluteUrl withOptions:options]; // } } |
3. NetworkInterface Plugin
ip주소를 가져오기 위한 플러그인 입니다. 해당 플러그인은 wi-fi일 경우에는 문제가 없지만 데이터로 ip를 가져오려고 하면 문제가 발생합니다. 플러그인이 Android용과 iOS용으로 나뉘어서 네이티브 코드들을 생성합니다. iOS에서 발생한 문제입니다.
|
if([[NSString stringWithUTF8String:temp_addr->ifa_name] isEqualToString:@"en0"] || [[NSString stringWithUTF8String:temp_addr->ifa_name] isEqualToString:@"pdp_ip0"]) { // Get NSString from C String address = [NSString stringWithUTF8String:inet_ntoa(((struct sockaddr_in *)temp_addr->ifa_addr)->sin_addr)]; } |
4. iOS 버전 관련
Android에서는 height에 %가 아닌 vh로 지정을 했었는데 iOS에서는 vh로 지정을 하면 iOS 9.0이상에서는 정상이였지만 iOS 8.0에서 헤더 부분의 투명한 처리가 되지 않는 현상도 있었습니다.
5. StatusBar Plugin
해당 플러그인을 사용하여 전체 화면을 StatusBar부분 밑으로 내려오게 하였으면 ionic _variables.scss에서 아래 부분을 수정하였습니다.
$ios-statusbar-height: 0px !default; |
현재 iframe과 관련된 부분이 모두 해결된 것은 아닙니다. 특정 화면에서 모바일 키보드가 올라오고 입력을 하면 화면이 올라 간다던지 특정 액션을 취하면 화면이 올라 간다던지 브라우저에서 나오지 않던 이상한 동작들이 생각보다 많습니다 또한 iOS에서는 4인치 이하 디바이스에서만 이상한 동작을 하는 현상도 발견되었습니다.
2015-12-23 수정
위의 현상과 관련되어 iframe의 높이와 관련된 현상이였습니다. iframe의 높이를 컨텐츠의 높이와 맞춰주기 위해서 onload이벤트에 아래 글을 참고하여 수정하시면 됩니다. 포인트는 높이에 대한 리셋이 되어야 새로운 페이지 접근 시에 스크롤이 가장 위에서 부터 시작합니다.
http://www.dyn-web.com/tutorials/iframes/height/
이번 프로젝트를 하면서 구조에 대한 중요성과 iframe은 쓰면 안된다는 확신이 생겼습니다. +_+
참고적으로 cordova ios 버전이 4.0이 얼마전에 나왔습니다. iOS UIWebView에서 WKWebView를 사용할 수 있다는 것이 핵심입니다.
http://cordova.apache.org/announcements/2015/12/08/cordova-ios-4.0.0.html
