JavaScript 브 라 우 저 유형 및 버 전 판단

10720 단어 JavaScript브 라 우 저
며칠 전 브 라 우 저 가족 에 게 는 구 글 이 내 놓 은 크롬 브 라 우 저 인 어린 왕자 가 태 어 났 습 니 다.크롬 이 명문 가 에서 태 어 났 기 때문에,비록 그 는 아직 어린 녀석 이지 만,감히 그 를 얕 보 는 사람 은 없다.앞으로 우 리 는 브 라 우 저의'4 대 재주꾼'을'5 송이 금화'로 바 꿔 야 한다 고 자주 말한다.
웹 사이트 전단 개발 에서 브 라 우 저 호환성 문제 가 우 리 를 혼 란 스 럽 게 만 들 었 는데 크롬 의 출시 가 우리 에 게 얼마나 많은 문 제 를 일 으 켜 야 할 지 몰 랐 다.브 라 우 저 호환성 은 전단 개발 프레임 워 크 가 해결 해 야 할 첫 번 째 문제 입 니 다.호환성 문 제 를 해결 하려 면 먼저 브 라 우 저의 유형 과 버 전 을 정확하게 판단 해 야 합 니 다.
자 바스 크 립 트 는 전단 에서 개발 한 주요 언어 입 니 다.자 바스 크 립 트 프로그램 을 작성 하여 브 라 우 저의 유형 과 버 전 을 판단 할 수 있 습 니 다.자바 스 크 립 트 는 브 라 우 저 유형 을 판단 하 는 데 일반적으로 두 가지 방법 이 있 는데 하 나 는 각종 브 라 우 저 만 의 속성 에 따라 구분 되 고 다른 하 나 는 브 라 우 저의 userAgent 속성 을 분석 하여 판단 한다.많은 경우 값 이 브 라 우 저 유형 을 판단 한 후에 브 라 우 저 버 전 을 판단 해 야 호환성 문 제 를 처리 할 수 있 으 며,브 라 우 저 버 전 을 판단 하 는 것 은 일반적으로 브 라 우 저의 userAgent 를 분석 해 야 알 수 있다.
우 리 는 먼저 각종 브 라 우 저의 특징 과 userAgent 를 분석 합 니 다.
IE
IE 만 ActiveX 컨트롤 을 만 드 는 것 을 지원 하기 때문에 다른 브 라 우 저 에 없 는 것 이 ActiveXObject 함수 입 니 다.window 대상 에 ActiveXObject 함수 가 존재 한다 고 판단 하면 현재 브 라 우 저가 IE 라 는 것 을 명확 하 게 판단 할 수 있다.IE 각 버 전의 전형 적 인 userAgent 는 다음 과 같다.


Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) 

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) 

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) 

Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
그 중에서 버 전 번 호 는 MSIE 이후 의 숫자 다.
Firefox
Firefox 의 DOM 요 소 는 모두 getBoxObjectFor 함수 가 있 습 니 다.이 DOM 요소 의 위치 와 크기 를 가 져 옵 니 다(IE 에 대응 하 는 것 은 getBoundingClient Rect 함수 입 니 다).이것 은 Firefox 만 의 것 입 니 다.판단 하면 현재 브 라 우 저가 Firefox 라 는 것 을 알 수 있 습 니 다.Firefox 몇 가지 버 전의 userAgent 는 대체적으로 다음 과 같 습 니 다.


Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1 

Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3 

Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
그 중에서 버 전 번 호 는 Firefox 이후 의 숫자 입 니 다.
Opera
Opera 는 전문 적 인 브 라 우 저 로 고 를 제공 합 니 다.바로 window.opera 속성 입 니 다.Opera 의 전형 적 인 userAgent 는 다음 과 같 습 니 다.


Opera/9.27 (Windows NT 5.2; U; zh-cn) 

Opera/8.0 (Macintosh; PPC Mac OS X; U; en) 

Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
이 가운데 버 전 번 호 는 Opera 에 가 까 운 숫자 다.
Safari
Safari 브 라 우 저 에는 다른 브 라 우 저 에 없 는 openDatabase 함수 가 있 습 니 다.Safari 를 판단 하 는 표지 로 사용 할 수 있 습 니 다.Safari 의 전형 적 인 userAgent 는 다음 과 같 습 니 다.


Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13 

Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
버 전 번 호 는 버 전 다음 숫자 입 니 다.
Chrome
Chrome 에는 Message Event 함수 가 있 지만 Firefox 도 있 습 니 다.다행히 크롬 에는 Firefox 의 getBoxObject For 함수 가 없 기 때문에 이 조건 에 따라 크롬 브 라 우 저 를 정확하게 판단 할 수 있 습 니 다.현재 크롬의 userAgent 는:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
이 가운데 버 전 번 호 는 크롬 뒤에 있 는 숫자 다.
재 미 있 는 것 은 크롬의 userAgent 에 Safari 의 특징 도 포함 되 어 있다 는 점 이다.이것 이 크롬의 모든 애플 브 라 우 저 애플 리 케 이 션 을 실행 할 수 있 는 기반 일지 도 모른다.
상기 정 보 를 알 게 되면 우 리 는 이러한 특징 을 바탕 으로 브 라 우 저 유형 과 버 전 을 판단 할 수 있 습 니 다.판단 결 과 를 Sys 이름 공간 에 저장 하여 전단 프레임 워 크 의 기본 표지 정보 가 되 어 향후 프로그램 에서 읽 을 수 있 도록 하 겠 습 니 다.공모 브 라 우 저 를 판단 하면 Sys 이름 공간 에 이 브 라 우 저 이름 의 속성 이 있 고 그 값 은 이 브 라 우 저의 버 전 번호 입 니 다.예 를 들 어 IE 7.0 이 판단 되면 Sys.ie 의 값 은 7.0 이다.Firefox 3.0 이 판단 되면 Sys.Firefox 의 값 은 3.0 입 니 다.다음은 브 라 우 저 를 판단 하 는 코드 입 니 다.

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
if (window.ActiveXObject) 
Sys.ie = ua.match(/msie ([\d.]+)/)[1] 
else if (document.getBoxObjectFor) 
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] 
else if (window.MessageEvent && !document.getBoxObjectFor) 
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] 
else if (window.opera) 
Sys.opera = ua.match(/opera.([\d.]+)/)[1] 
else if (window.openDatabase) 
Sys.safari = ua.match(/version\/([\d.]+)/)[1]; 
//       
if(Sys.ie) document.write('IE: '+Sys.ie); 
if(Sys.firefox) document.write('Firefox: '+Sys.firefox); 
if(Sys.chrome) document.write('Chrome: '+Sys.chrome); 
if(Sys.opera) document.write('Opera: '+Sys.opera); 
if(Sys.safari) document.write('Safari: '+Sys.safari); 
</script>
저 희 는 IE 에 대한 판단 을 첫 번 째 로 생각 합 니 다.IE 의 사용자 가 가장 많 고 그 다음은 Firefox 를 판단 하기 때 문 입 니 다.사용자 의 순서에 따라 브 라 우 저 유형 을 판단 하면 판단 효율 을 높이 고 헛 된 일 을 적 게 할 수 있다.크롬 을 세 번 째 판단 에 두 는 이 유 는 크롬 이 곧 시장 점유 율 세 번 째 브 라 우 저가 될 것 이 라 고 예 상 했 기 때문이다.이 가운데 브 라 우 저 버 전 을 분석 할 때 정규 표현 식 으로 버 전 정 보 를 분석 했다.
만약 당신 의 JavaScript 가 매우 높 게 놀 고 있다 면,당신 은 앞의 판단 코드 를 이렇게 쓸 수 있 습 니 다.

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] : 
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] : 
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] : 
window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] : 
window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0; 
//       
if(Sys.ie) document.write('IE: '+Sys.ie); 
if(Sys.firefox) document.write('Firefox: '+Sys.firefox); 
if(Sys.chrome) document.write('Chrome: '+Sys.chrome); 
if(Sys.opera) document.write('Opera: '+Sys.opera); 
if(Sys.safari) document.write('Safari: '+Sys.safari); 
</script>
이렇게 하면 자 바스 크 립 트 코드 를 좀 더 간소화 할 수 있다.물론 가 독성 이 조금 떨 어 지 는 것 은 효율 을 중시 하 느 냐,유지 가능성 을 중시 하 느 냐 에 달 려 있다.
서로 다른 특징 을 사용 하여 브 라 우 저 를 판단 하 는 방법 은 정규 표현 식 으로 userAgent 를 분석 하 는 것 보다 속도 가 빠 르 지만 이러한 특징 은 브 라 우 저 버 전에 따라 달라 질 수 있 습 니 다.예 를 들 어 하나의 브 라 우 저 만 의 특성 이 시장 에서 성공 을 거 두 었 고 다른 브 라 우 저 도 이 특성 에 따라 가입 하여 이 브 라 우 저의 독특한 특징 을 사라 지게 하여 우리 의 판단 을 실패 하 게 할 수 있다.따라서 상대 적 으로 안전 한 방법 은 userAgent 의 특징 을 분석 하여 브 라 우 저 유형 을 판단 하 는 것 이다.게다가 버 전 정 보 를 판단 하 는 데 도 브 라 우 저의 userAgent 를 분석 해 야 한다.
각종 브 라 우 저의 userAgent 정 보 를 분석 함으로써 각종 브 라 우 저 와 그 버 전의 정규 표현 식 을 구분 하기 어렵 지 않 습 니 다.그리고 브 라 우 저 유형 에 대한 판단 과 버 전 판단 은 하나 로 합 쳐 질 수 있다.그래서 우 리 는 아래 의 코드 를 쓸 수 있다.

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
var s; 
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : 
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : 
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : 
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; 
//       
if (Sys.ie) document.write('IE: ' + Sys.ie); 
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); 
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); 
if (Sys.opera) document.write('Opera: ' + Sys.opera); 
if (Sys.safari) document.write('Safari: ' + Sys.safari); 
</script>
그 중에서"...?.......................................................이러한 판단 표현 식 은 코드 를 간소화 한다.판단 조건 은 정규 표현 식 의 일치 와 결과 복 제 를 완성 할 뿐만 아니 라 직접 조건 으로 판단 하 는 할당 문 입 니 다.다음 버 전 정 보 는 앞의 일치 결과 에서 추출 하면 되 는데 이것 은 매우 효율 적 인 코드 이다.
이상 의 코드 는 모두 전단 프레임 워 크 를 만 들 기 위 한 예비 연 구 를 하고 5 대 브 라 우 저 에서 테스트 를 통 과 했 습 니 다.앞으로 어떤 브 라 우 저 를 판단 하려 면 if(Sys.ie)나 if(Sys.fireforx)등 형식 만 사용 하고 브 라 우 저 버 전 을 판단 하려 면 if(Sys.ie=='8.0')나 if(Sys.fireforx=='3.0')등 형식 만 사용 하면 표현 이 매우 우아 하 다.
전단 프레임 워 크 프로젝트 가 시작 되 었 습 니 다.모든 것 은 과정 과 결과 에 달 려 있 습 니 다.
오리지널:리 전(leadzen)아 리 소프트웨어 2008-9-6 항주
여러분 들 을 즐겁게 하기 위해 서 저희 편집장 님 께 서 몇 가 지 를 더 정리 해 주 셨 습 니 다.

<script language="JavaScript"> 
function getOs() 
{ 
  var OsObject = ""; 
  if(navigator.userAgent.indexOf("MSIE")>0) { 
    return "MSIE"; //ie   
  } 
  if(isChrome=navigator.userAgent.indexOf("Chrome")>0){ 
    return "chrome"; //Chrome   
  } 
  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
    return "Firefox"; //Firefox   
  } 
  if(isOpera=navigator.userAgent.indexOf("Opera")>0) { 
    return "Opera"; //Opera   
  } 
  if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
    return "Safari"; //Safari   
  }  
  if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
    return "Camino"; //Camino   
//……        ……
  } 
  if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
    return "Gecko"; 
  } 
} 
alert(navigator.userAgent);
 alert("        :"+getOs()); 
</script>
비교적 완전한 판단 코드

<script type="text/javascript"> 
document.write('    e：');
var OsObject=navigator.userAgent;
//   「Opera」    
if(OsObject.indexOf("Opera") != -1) 
{ 
   document.write('      Opera ？'); 
} 
//   「MSIE」    
else if(OsObject.indexOf("MSIE") != -1) 
{ 
   document.write('      Internet Explorer ？'); 
} 
//   「chrome」    ，  360      chrome UA

else if(OsObject.indexOf("Chrome") != -1) 
{ 
  document.write('      chrome 360    ？'); 
}
//   「UCBrowser」    
else if(OsObject.indexOf("UCBrowser") != -1) 
{ 
  document.write('      UCBrowser ？'); 
}
//   「BIDUBrowser」    
else if(OsObject.indexOf("BIDUBrowser") != -1) 
{ 
  document.write('            ？'); 
}
//   「Firefox」    
else if(OsObject.indexOf("Firefox") != -1) 
{ 
  document.write('      Firefox ？'); 
}
//   「Netscape」    
else if(OsObject.indexOf("Netscape") != -1)
{ 
  document.write('      Netscape ？'); 
} 
//   「Safari」    
else if(OsObject.indexOf("Safari") != -1) 
{ 
   document.write('      Safari  ？'); 
} 
else{ 
　 document.write('        。'); 
} 
</script>
javascript eval 함수 깊이 인식
자바 의 static 키워드 깊이 이해

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage