블로그에 적용한 브라우져 체크 스크립트, Edge 넌 뭐냐?

블로그에 적용한 브라우져 체크 스크립트, Edge 넌 뭐냐?


아래와 같이 묘한오빠 블로그를 방문하면 인덱스페이지에 브라우져를 체크하여 멘트를 날려주도록 수정했다.

뭔가? 이상하다. Edge가 왜? Chrome으로 나오는지 모르겠네 ^^;


Edge, 넌 뭐냐?


MS Edge

Chrome



사용한 스크립트는 아래와 같다.



/*!

 * Broswer Check.....

 * 수정 : 2018.05.28 - 18:54:41

 */


var broswer = {};

 

broswer.isMobile = function() {

    var tempUser = navigator.userAgent;

    var isMobile = false;

 

    // userAgent 값에 iPhone, iPad, ipot, Android 라는 문자열이 하나라도 존재한다면 모바일로 간주됨.

    if (tempUser.indexOf("iPhone") > 0 || tempUser.indexOf("iPad") > 0

            || tempUser.indexOf("iPot") > 0 || tempUser.indexOf("Android") > 0) {

        isMobile = true;

    }

    return isMobile;

};

 

broswer.isMobileChkPrint = function(isMobileChk) {

    var result = "";

    if (isMobileChk) {

        result = "<em>Mobile Web broswer</em>&nbsp;";

    } else {

        result = "<em>PC Web broswer</em>&nbsp;";

    }

    return result;

};


//브라우저의 종류 확인

broswer.getBroswerName = function() {

    //userAgent값을 모두 소문자로 변환하여 변수에 대입

    var agt = navigator.userAgent.toLowerCase();

    

    if(agt.indexOf("chrome") != -1) {

        return '<b>Chrome.</b> Very Good <span class="ooppa-font">... 乃 </span></p>';

    }

    else if(agt.indexOf("opera") != -1) {

        return '<b>Opera.</b> 살짝 이상하게 보이죠 <span class="ooppa-font"> ^^; </span></p>';

    }

    else if(agt.indexOf("firefox") != -1) {

        return '<b>Firefox.</b> 조금 이상하게 보이죠 <span class="ooppa-font"> ^^; </span></p>';

    }

    else if(agt.indexOf("safari") != -1) {

        return '<b>Safari.</b> 많이 이상하게 보이죠 <span class="ooppa-font"> ^^; </span></p>';

    }

    //msie는 Expolrer 11d이전 버전, trident는 Explorer 11버전

    else if(agt.indexOf("msie") != -1 || agt.indexOf("trident") != -1) {

        return '<b>Internet Explorer.</b> 아~<span class="ooppa-font"> ㅠ.ㅠ </span> 언제 버리실건가요 ???</p>';

    }

    else if(agt.indexOf("Microsoft Edge") != -1 || agt.indexOf("trident") != -1) {

        return '<b>Edge.</b> 그나마 다행입니다. Internet Explorer가 아니라서... <span class="ooppa-font"> ㅠㅠ; </span></p>';

    }

};




var isMobileChk= broswer.isMobile();

var resultData =broswer.isMobileChkPrint(isMobileChk);

document.write("<p><br></p><p>" +resultData+" "+broswer.getBroswerName()+"<p><br></p>"); 

document.write("<p><b>Chrome</b> <em>Broswer</em>에 <b>최적화</b>&nbsp;했습니다<span class='ooppa-font'> ^_^ </span></p><p><br></p>");


묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 15

*

*

    • ( agent.search( "edge/" ) > -1 )
      로 하시면 됩니다!

    • 그나저나 저는 익스플로러 환경에서 제대로 동작하지 않을 수 있다는 문구만 만들어서 익스플로러나 엣지면 표시되게 했는데, 각종 브라우저를 세세하게 다 챙기시는 꼼꼼함...
      파폭같은건 이용하는 사람이 별로 없어서 테스트도 안 했었네요 ㅠㅠ
      귀찮음에 굴복한 걸 반성하고 갑니다...

    • 알려주신 방법으로 해봤는데...?
      그냥 크롬으로 나오네요 ^^;
      그래서 다시 원복했습니다

    • 재미삼아 추가해 본거라 ㅎㅎㅎ
      대충 쓰죠 ^_^
      opera라도 크롬으로 나오니까...ㅋㅋ

    • var agent = navigator.userAgent.toLowerCase();
      if ((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || ( agent.search( "edge/" ) > -1 ) || (agent.indexOf("msie") != -1)) {
      document.write('<style>.explorer{display:block}</style>');
      }

      혹 참고될까봐 남깁니다.
      제 스크립트에요.

    • MS Edge → indexOf('edge')
      Opera → indexOf('opera') || indexOf('opr')

      이렇게 잡아주시고,

      indexOf('chrome') 을 가장 마지막으로 내려주시면 됩니다..

    • Edge용 멘트 빵 터지네요.. ㅋㅋ;

    • 재밌는게 크롬을 밑으로 내리면 사파리로 나오고 크롬을 사파리 위로 올리면 사파리브라우저가 크롬으로 나오네요 ^^ ㅋㅋ

    • if ( agent.indexOf('trident') != -1 ) { msg2 = 'MS IE 11'; }
      else if ( agent.indexOf('edge') != -1 ) { msg2 = 'MS Edge'; }
      else if ( agent.indexOf('firefox') != -1 ) { msg2 = 'Mozilla Firefox'; }
      else if ( agent.indexOf('opera') != -1 || agent.indexOf('opr') != -1 ) { msg2 = 'Opera'; }
      else if ( agent.indexOf('whale') != -1 ) { msg2 = 'Naver Whale'; }
      else if ( agent.indexOf('chrome') != -1 ) { msg2 = 'Google Chrome'; }
      else if ( agent.indexOf('safari') != -1 ) { msg2 = 'Safari'; }

      사파리를 가장 밑으로 내리니까 되는듯 합니다..
      사파리 브라우저가 없어서, user-agent switcher 확장앱으로 테스트 해보니 잘 되네요.. ^^

    • 댓글을 보고 멘트를 찾아 읽어보았는데
      멘트 작성하시느라 고민하셨겠네요. ㅎㅎ

    • 알려주신 방법을 요레~요레~ 잘, 수정하였습니다.
      감사합니당 ㅋㅋㅋ

    • 클릭했을때 빨간줄이 떠 있던게 이거였군요. 마우스를 움직이니 사라져서 뭘까 궁금했는데 ㅎㅎ
      크롬에 최적화 되어있군요^^
      제 블로그 애널리틱스보니까 유입브라우저중에 크롬이 50%더라구요@_@ 사파리 15%, IE15%
      ie나 사파리 최적화도 가끔 봐줘야겠어요^^

    • 저는 네이버 웨일을 메인으로 크롬을 서브로 회사 전자결제는 익스로만 사용하고 있습니다.
      인덱스페이지에서만 나오도록 했고
      접속하는 분들이 다양하길래 한번 적용해 봤네요 ^_^

이전 글

다음 글