본문 바로가기

Local Oriented/jQuery

jQuery v1.4.2 에서 웹브라우저 종류 체크, $.browser.msie


DOCTYPE 이 정의된 HTML 에서 필요할까 싶긴 한데요..
DOCTYPE 이 없이 HTML4.x 로 작성된 웹페이지라면,
웹브라우저 종류를 알아내는 것이 중요할 수도 있어요..

$.browser.msie 가 true 이면 MS 사의 인터넷 익스플로러, 아니면 다른 웹브라우저 입니다.
각 웹브라우저 간의 호환성이나 표준 HTML 을 고민하다 보면, 가끔씩 TABLE 태그를 사용하던 시절이 그립기도 합니다.

$.browser.version 는 웹브라우저 버전.
$.browser.safari 사파리 웹브라우저일때 true, 아니면 undefined.
$.browser.opera 오페라 웹브라우저일때 true, 아니면 undefined.
$.browser.msie MS IE 웹브라우저일때 true, 아니면 undefined.
$.browser.mozilla 파이어폭스 웹브라우저일때 true, 아니면 undefined.

var browser = $.browser.msie;
if(browser==undefined && !browser) MS IE 가 아닌 조건
if(browser!=undefined && browser) MS IE 인 조건

if($.browser.msie) 라고 하면 MS IE 인 경우에만 실행되니까.. 아무래도 IE 는 예전 버전, 특히 6.x 가 살아 있어서요..

자세한 것은 아래 URL 을 참조하시구요..
http://godffs.tistory.com/581




본문 레이아웃이 가운데 정렬인 화면에서 x 좌표가 웹브라우저 폭 변화에 따라 달라지기 때문에 발생하는 점은,
상위 요소를 position:relative 로 주고 x 좌표를 주어야 하는 하위 요소에 position:absolute 를 주면 되는데..
DOCTYPE 이 없는 IE4.x HTML 화면에서는, 웹브라우저 종류에 따라 x 좌표가 틀어지게 됩니다.
이때 웹브라우저 화면 resize 이벤트에 관련 코드를 추가하면 됩니다.
$(window).resize(function(){
  /* 이곳에 x 좌표 관련 코드를 넣어요 */
});


- 다른 도메인을 품고 있는 iframe 안의 내용을 resize 하는 방법

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html



예를 들면 아래와 같이요..
<html>
<body style="margin:0 auto">
  <div id="contentA" style="position:relative">
    <div id="contentB" style="position:absolute; left:[x좌표값]px">표시되는 화면 요소</div>
  </div>
  <script>
    var msie = $.browser.msie;
    if(msie==undefined && !msie){           // MS IE 가 아닌 웹브라우저
      var hnp = $('#contentA').position();
      if(hnp!=null){                                 // 이 부분은 화면에 따라 contentA 요소가 존재하지 않을 수 있어서 추가된 부분
        var $b1 = $('#contentB');
        $b1.css('left',[x좌표값] + hnp.left);
       $(window).resize(function(){
          $b1.css('left',[x좌표값] + $('#contentA').position().left); // window.resize 시점의 값을 되가져 와야 한다
       });
      }
    }
  </script>
</body>
</html>



http://spoqa.github.com/2012/08/16/make-a-responsive-web.html

$.extend($.browser,

  {iOS:navigator.userAgent.toLowerCase().match(/iP(hone|ad|od)/i),

   Android:navigator.userAgent.toLowerCase().match(/Android/i),

   WindowsPhone:navigator.userAgent.toLowerCase().match(/Windows\ Phone/i)}

);

if($.browser.msie){...}

if($.browser.iOS){...}

if($.browser.Android){...}

if($.browser.WindowsPhone){...}

if($.browser.msie){

  var ieVersion = $.browser.version;

  if(ieVersion <= 6.0){...}

  else if(ieVersion == 7.0){...}

  else if(ieVersion == 8.0){...}

  else if(ieVersion >= 9.0){...}