[mobile web] 로직 검토

[mobile web] 로직 검토

신한카드 모바일웹 분석하기

PC에서 접근했을 때와 모바일에서 접근했을 때를 구분합니다.

아이폰을 따로 구분합니다.

1. 접근 단말기에 따른 페이지 이동하기

var ua = navigator.userAgent;

var checker = {

    iphone: ua.match(/(iPhone|iPod)/),

    ipad: ua.match(/iPad/),

    blackberry: ua.match(/BlackBerry/),

    android: ua.match(/Android/),

    galaxyS: ua.match(/SHW-M110S/),

    galaxyNote: ua.match(/SHV-E160S/),

    galaxyNexus: ua.match(/SHW-M420S/),

    galaxyTab89: ua.match(/SHV-E140S/),

    galaxyTab101: ua.match(/SHW-M380S/)

};

if (checker.android && (checker.galaxyS || checker.galaxyNote || checker.galaxyNexus)){

} else if (checker.ipad){

} else if (checker.android && (checker.galaxyTab101 || checker.galaxyTab89)){

} else if (checker.iphone){

} else if (checker.blackberry){

} else {

}

2. 기기 구분하기

var DEVICE_TYPE = navigator.userAgent;

var DEVICE_CHECK_IPAD = DEVICE_TYPE.indexOf("iPad") > -1;

var UserAgent = navigator.userAgent;

if (UserAgent.match(/iPhone/) != null)

{

//alert('ios')

document.write('<script src=\"/common/js/m.flick.trans.js\"><\/script>')

}else{

//alert('etc')

document.write('<script src=\"/common/js/m.flick.ani.js\"><\/script>')

}

3. null 일 경우 값 설정하기

function nullValue(val, dValue) {

var result;

if(val == "") result = dValue;

else result = val;

return result;

}

var flag = nullValue( getHttpParam("flag"), "1" );

5. userAgent 값 보기

var UserAgent = navigator.userAgent;

alert(UserAgent);

* 크롬 접속시

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5

(KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5

* 안드로이드 (넥서스원)

Mozilla/5.0 (Linux; U; Android 2.3.6; ko-kr; Nexus One Build/ GRK39F) AppleWebKit/533.1

(KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

6. 모바일 웹에서 앱 설치하기 메뉴 코드

아이폰과 그외 안드로이드 폰을 구분하여 코딩이 들어갔다.

<a href="#" class="serv01" onclick="checkApplicationInstall('SHCM_007_001')">앱 설치하기</a>

<iframe id="checkframe" name="checkframe" title="빈프레임" src="" width="0" height="0" style="display: none;"></iframe>

var AgentType = navigator.userAgent;

var checker = {

       iphone:       AgentType.match(/(iPhone|iPod)/),

       ipad:         AgentType.match(/iPad/),

       android:      AgentType.match(/Android/),

       galaxyS:      AgentType.match(/SHW-M110S/),

       galaxyNote:   AgentType.match(/SHV-E160S/),

       galaxyNexus:  AgentType.match(/SHW-M420S/),

       galaxyTab89:  AgentType.match(/SHV-E140S/),

       galaxyTab101: AgentType.match(/SHW-M380S/)

     };

function checkApplicationInstall(callPage) {

   if (checker.ipad || checker.iphone) { //iOS 경우

      if (confirm("Smart 신한의 해당 서비스 메뉴로 이동합니다. Smart 신한이 설치된 경우 '승인' 버튼을 선택하시고, 업데이트 및 설치가 필요한 경우 '취소' 버튼을 선택해주십시오.")){

          document.checkframe.location = "smartshinhan://appcall?StartPageMenuName=" + callPage;

      $("#checkframe").css("display", "block");

      } else {

    document.location.href = "http://itunes.apple.com/us/app/id360681882?mt=8";  

      }

   } else { //안드로이드 경우    

     document.checkframe.location = "smartshinhan://appcall?StartPageMenuName=" + callPage;

 $("#checkframe").css("display", "block");

 setTimeout("checkApplicationInstall_callback()", 1000);

   }

}

function checkApplicationArumin(callPage) {

   if (checker.ipad || checker.iphone) { //iOS 경우

      alert("앱스토어 정책상 iOS용 Smart 신한에서는 기부하기 기능을 지원하지 않습니다.\nPC를 통하여 당사 홈페이지(www.shinhancard.com)에 접속하시면 기부가 가능합니다.");

    return;

   } else { //안드로이드 경우 

     document.checkframe.location = "smartshinhan://appcall?StartPageMenuName=" + callPage;

 $("#checkframe").css("display", "block");

 setTimeout("checkApplicationInstall_callback()", 1000);

   }

}

    function checkApplicationInstall_callback() {

try {

//어플리케이션 설치되어있음

var s = document.checkframe.document.body.innerHTML;

} catch (e) {

// 어플리케이션 설치 안 되어있음

if (confirm("스마트신한 앱을 설치하시겠습니까?")){

     if (checker.android && (checker.galaxyS || checker.galaxyNote || checker.galaxyNexus)){

      $("#checkframe").attr("src", "market://details?id=com.shinhancard.smartshinhan");

     }

     else if (checker.ipad){

      $("#checkframe").attr("src", "http://itunes.apple.com/us/app/id360681882?mt=8");

     }

     else if (checker.android && (checker.galaxyTab101 || checker.galaxyTab89)){

      $("#checkframe").attr("src", "market://details?id=com.shinhancard.smartshinhan");

     }

     else if (checker.iphone){

      document.location.href = "http://itunes.apple.com/us/app/id360681882?mt=8";

     }

     else {

      $("#checkframe").attr("src", "market://details?id=com.shinhancard.smartshinhan");

      //document.location.href = "http://newm.shinhancard.com/installFile/SmartShinhan.apk";

     }  

  }

}

}

[mobile web] 로직 검토