jQuery를 사용하여 브라우저 및 version_jquery를 감지하는 스크립트 코드 구현

Javascript를 사용하여 브라우저를 감지하는 방법은 일반적인 질문인 것 같습니다. 내 경험에 따르면 Javascript를 사용하여 브라우저를 감지하는 것은 두 가지 주요 범주의 방법을 사용하는 것 이상입니다.

하나는 브라우저의 기능적 속성을 활용하는 것입니다. 예를 들어 브라우저가 getElementById 메소드를 지원하는지 확인하려면

if (document.getElementById) {
// 메소드가 존재하므로 여기서 사용하세요
} else {
// 다른 작업 수행
}

이런 종류의 감지는 사용자가 어떤 브라우저를 사용하고 있는지 알 수 없지만 개발자가 자신의 코드가 브라우저의 기능과 호환되는지 판단할 수 있는 테스트를 견딜 수 있습니다. 브라우저가 실제로 수행하는 작업에 관심이 있고 브라우저의 실제 ID에는 관심이 없는 경우 이 접근 방식을 사용할 수 있습니다.

두 번째는 가장 오래되고 널리 사용되는 탐지 방법일 수 있는 전통적인 사용자 에이전트 문자열을 사용하는 것입니다. 기술적으로 말하면 사용자는 사용자 에이전트를 변경할 수 있지만 이를 사용하면 몇 가지 유용한 정보를 얻을 수 있습니다.

좀 주제에서 벗어난 내용일 수도 있습니다. jQuery를 사용해 본 친구들은 jQuery의 자체 브라우저 방법을 사용하면 사용자가 사용 중인 브라우저 또는 버전까지 정확하게 확인할 수 있다는 것을 알고 있습니다. 훌륭한 개발 라이브러리 사용자는 구현 메커니즘 중 일부를 이해하고 싶어합니다. 그러면 jQuery는 이를 어떻게 수행합니까?

jQuery(버전 1.2.2) 최신 소스코드를 보면 1195번째 줄부터 1205번째 줄까지 브라우저를 결정하는 기능이다. 보시다시피 jQuery는 위의 두 번째 방법을 사용합니다. 이는 사용자 에이전트를 사용하여 사용자의 브라우저와 버전을 확인하는 것입니다.

솔직히 처음에는 코드 5줄만으로 브라우저의 종류와 버전을 결정할 수 있다는 사실에 매우 놀랐습니다. 저자는 "Javascript를 사용한 고급 프로그래밍"이라는 책에서 별도의 장을 사용하여 Javascript를 사용하여 브라우저와 운영 체제를 결정하는 방법을 설명합니다. 그런데 코드를 읽어보니(실제로는 어렵지 않습니다.) 문득 깨달음이 느껴졌습니다. 더 이상 고민하지 말고 코드를 게시해 보겠습니다.

var userAgent = navigator.userAgent.toLowerCase();

// 사용 중인 브라우저 파악
jQuery.browser = {
version: (userAgent.match( /.(?:rv|it|ra|ie)[/: ]([d.] )/ ) || [])[1],
Safari: /webkit/.test( userAgent ),
오페라: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test(userAgent)&& !/(호환|webkit)/.test(userAgent)
};

이 시점에서 숙련된 Javascript 개발자는 이미 그 비밀을 알고 있습니다. 예, jQuery는 정규식을 사용하여 브라우저의 유형과 버전을 결정합니다. 매우 아름답게 완성되었습니다!

먼저 user-agent를 소문자로 통일한 후 일반 규칙을 사용하여 점차적으로 어떤 브라우저인지 일치시킵니다. 정규화에 대한 자세한 내용은 여기를 참조하세요. 그러나 어떤 사람들은 이 판단이 맞는지 의심스러울 것이다. 그럼 먼저 다음 네 가지 주류 브라우저의 사용자 에이전트를 살펴보겠습니다.

Safari(Windows 버전)

... AppleWebKit/523.12.9(KHTML, like Gecko) 버전 / 3.0 Safari/523.12.9

Opera(Windows XP의 Opera 9.2)

Opera/9.24(Windows NT 5.1; U; zh-cn)

Mozilla(Firefox) 2.0 .11(Windows XP)

... Windows NT 5.1; zh-CN; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Internet Explorer(Windows 7.0) XP )

Mozilla/4.0(호환; MSIE 6.0; Windows NT 5.1)

jQuery는 각 브라우저의 다양한 사용자 에이전트 특성을 매우 영리하게 사용합니다. 예를 들어 Safari의 "/webkit/"은 배타적이며 "/opera/"도 Opera 브라우저에만 고유합니다. 이 검증 방법은 현재 주류 브라우저에서 사용할 수 있으며 기본적으로 정확하게 판단할 수 있습니다.

여기서 멈추겠습니다. jQuery는 실제로 최고의 Javascript 개발 프레임워크 중 하나입니다. 그것을 마스터하면 실제로 자신의 개발에 많은 재미를 더할 수 있습니다. 앞으로도 jQuery 프레임워크를 하나씩 읽어본 경험을 포스팅할 예정이니 많은 관심 부탁드립니다.