jQuery를 통한 웹브라우저 식별하기

jQuery를 이용하여 웹페이지를 동적으로 표현할 수 있게 할 수 있습니다.

jQuery API중에서 특히 Effect와 관련된 부분들을 활용하여 손쉽게 구현할 수 있습니다. (대표적으로 fadein이나 fadeout 효과가 바로 그것입니다.) 그런데 이러한 효과를 적용해서 화려하고 이쁜 웹 페이지를 만들었는데, 이것이 특정 웹 브라우저 환경에서는 동작하지 않는 경우가 발생한 적이 있었습니다. (정확히는 컴퓨터가 느려서 그런건지 애니메이션 동작이 뚝뚝 끊기면서 동작하더군요.)

그래서 이러한 문제를 해결할 수 있는 방법이 없을까 고민하다가 결국엔 그 문제가 발생하는 웹 브라우저 환경에서는 다르게 움직이도록 하기로 하였습니다. 웹 브라우저 환경에 따라서 다르게 동작하도록 하기 위해서는 웹 브라우저의 종류와 버전을 식별할 수 있어야 했습니다. 인터넷을 찾아보던 중 아래와 같은 자료를 찾을 수 있었고, 이를 통해서 문제를 해결할 수 있었습니다.

아래는 웹 브라우저의 종류와 버전을 식별할 수 있도록 하기 위한 소스코드입니다.

 

형식 : jQuery.browser.웹브라우저종류

jQuery.browser.safari	사파리
jQuery.browser.msie	인터넷 익스플로러
jQuery.browser.mozila	모질라
jQuery.browser.opera	오페라
jQuery.browser.webkit	크롬

예시 : 

if(jQuery.browser.msie)

{

/*IE인 경우입니다.*/

}

jQuery 객체에서 browser 객체를 얻어오고 난 뒤에 safari, msie 등의 속성을 통해서 현재 사용중인 웹 브라우저의 종류를 알 수 있습니다. 그리고 위 표에서 각각의 속성은 true 혹은 false의 값을 가집니다. 만약 현재 사용중인 웹 브라우저가 인터넷 익스플로러라면 true값을 가지게 되고, 인터넷 익스플로러가 아니라면 false값을 가지게 됩니다. 그래서 위 예시와 같은 소스코드를 통해서 웹 브라우저의 종류에 따라 서로다른 동작을 하도록 구현하실 수 있습니다.

그리고 아래와 같이 browser 객체의 version 속성을 이용하여 현재 웹 브라우저의 버전 정보를 식별할 수 있습니다.

예시 :

window.alert(jQuery.browser.version);

jQuery.browser.version 은 브라우저의 버전정보를 문자열 형태로 가지고 있습니다. 따라서 위 예시와 같이 alert로 출력하면 버전 정보를 확인하실 수 있으며, 버전 정보는 웹 브라우저 종류마다 다르게 출력됩니다. 아래는 웹 브라우저 종류에 따른 version 속성의 결과값입니다.

웹 브라우저 종류	출력되는 버전명 (문자열)
Internet Explorer	6.0, 7.0, 8.0
Mozilla/Firefox/Flock/Camino	1.7.12, 1.8.1.3, 1.9
Opera	10.06, 11.01
Safari/Webkit	312.8, 418.9

만약 현재 사용중인 웹 브라우저가 인터넷 익스플로러 8.0인지 파악하기 위해서는

if(jQuery.browser.msie && jQuery.browser.version == "8.0")

{

/* IE 8.0 입니다.*/

}

위와 같은 소스코드로 식별이 가능합니다. 이제는 jQuery로 쉽게 브라우저를 식별하실 수 있겠죠?? 아래 URL주소를 참고하시면 좀 더 자세한 내용을 보실 수 있습니다. 

1. http://api.jquery.com/jQuery.browser/

2. http://ahman.kr/30164027522