[ 자바스크립트 ] 오페라 브라우저의 버전 체크용 함수

최종 수정일 : 2015. 9. 2.

"Opera Mobile", "Opera Mini", "Opera" 브라우저와 관련된 내용이며,
"userAgent"의 문자열을 검색해서, 브라우저 정보를 찾아내는 방식이다.

"Opera" 브라우저를 사용할 수 있다면, 이 페이지를 오페라에서 열어보시오~* ^^

 
<script type="text/javascript">

// Opera Mobile / Opera Mini / Opera 
// 출처 : http://tonks.tistory.com/113 

function check_out_Opera (){ 

	 var word; 
	 var appName = appVersion = "N/A"; 

	 var agent = navigator.userAgent.toLowerCase(); 
	 var opera = agent.search( "opera|opr/" ); 


	 if ( opera > -1 ) { 

		 if ( agent.search("opr/") > -1 ) word = "opr/"; 

		 else if ( agent.search("version/") > -1 ) word = "version/"; 

		 else { 
			 if ( agent.search( "opera [0-9]{1,}" ) > -1 ) word = "opera "; 
			 else word = "opera/"; 
		 } 


		 appName = "Opera"; 

		 if ( agent.search("opera mini") > -1 ) appName = "Opera Mini"; 
		 else if ( agent.search("opera mobi") > -1 ) appName = "Opera Mobile"; 
	 } 


	 var reg = new RegExp( word + "([0-9]{1,})(\\.{0,}[0-9]{0,1})" ); 
	 if (  reg.exec( agent ) != null  ) appVersion = RegExp.$1 + RegExp.$2; 


	 var info = { "name" : appName , "version" : appVersion }; 

	 return info; 
} 

</script>
 

---

아래는, 지금 사용중이신 브라우저에 설정된, "userAgent"의 내용입니다.
버튼을 클릭해보세요~*

 

 

 

 
<button onclick="check_browser()"> 클릭하세요 </button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script type="text/javascript">

var demo1 = document.getElementById( "demo1" ); 
var demo2 = document.getElementById( "demo1" ); 
var demo3 = document.getElementById( "demo1" );
 
function check_browser (){ 

	 var browser = check_out_Opera(); 

	 var verString = browser.version; 
	 var verNumber = parseInt( browser.version ); 

	 demo1.innerHTML = verString + " " + verNumber; 


	 var bName = browser.name; 

	 demo2.innerHTML = bName; 

	 if ( bName == "N/A" ) demo3.innerHTML = "오페라가 아닌, 다른 브라우저를 사용중이십니다."; 
	 else demo3.innerHTML = ""; 
} 
</script>
 

---

"Opera" 사이트 및 인터넷에 있는 자료들을 참고하여 작성하였다.
혹시나 문제점이 발견된다면, 댓글을 달아주시오. ─.─;;

오페라 브라우저는, 웹브라우저인 "Opera"를 기본으로 사용하며,
모바일 브라우저에서 사용되는 이름으로는,
"Opera Mobile"과 "Opera Mini"가 있다.

또한, "Opera" 브라우저의 "userAgent"는 대부분 아래와 같은 형식이다.

• Mozilla/5.0 (Windows NT 4.0; rv:31.0) Gecko/20000101 Firefox/31.0 OPR/13.0
• Mozilla/4.0 (compatible; Windows Mobile; WCE; Opera Mobi/WMD-50433; U; de) Presto/2.4.13 Version/10.00
• Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.24
• Opera/8.10 (Windows NT 5.1; U; en)

• Opera/9.80 (Linux i686; Opera Mobi/1040; U; en) Presto/2.5.24 Version/10.00
• Opera/9.80 (J2ME/MIDP; Opera Mini/9.80 (Windows NT 6.1; Opera Mobi/19.916; U; en) Presto/2.5.25
• Opera/9.80 (J2ME/MIDP; Opera Mini/5.0/870; U; en) Presto/2.4.15

• Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Opera/9.80 (Android; Opera Mini/7.0.29952/28.2075; U; es) Presto/2.8.119 Version/11.10) → 여러 사이트에 의하면, "익스플로러"인 척하는 "오페라"라고 한다.

---

태그에 스타일을 설정할 때,
버전이나 그 종류별로 따로 class를 지정하는 방식으로
아래처럼 활용할 수 있겠다.

아래 소스는, body 태그에 스타일을 지정해주는 것이며,
그 태그에 이미 class가 있을 경우를 대비해서, 해당 태그에 class를 추가하는 방식으로 작성하였다.
물론!! body가 아닌, 다른 태그로 바꿔도 된다. ^^*

 
<style type="text/css">

  /* 오페라의 모바일용 스타일 */
 .OperaMobile , 
 .OperaMini { }

 /* Opera 12.1 버전부터 & 다른 브라우저용 스타일 */
 .Opera_12_1 , 
 .Others { }

 /* Opera 10.5 버전부터 */
 .Opera_10_5 { }

 /* Opera 7.5 버전부터 */
 .Opera_7_5 { }

</style>
 

 
<script type="text/javascript">

var myTag = document.body; 
// 또는 var myTag = document.getElementById( "someId" ); 

var callFunction = individual_case( myTag ); 


function individual_case ( tag ) { 

	 var class = tag.className; 
	 var newClass = ""; 

	 var browser = check_out_Opera(); 


	 var bVersion = Number( browser.version ); 

	 if ( isNaN( bVersion ) || bVersion >= 12.1 ) newClass = "Opera_12_1 Others"; 
	 else if (  10.5 <= bVersion &&  bVersion < 12.1 ) newClass = "Opera_10_5"; 
	 else if ( 7.5 <= bVersion &&  bVersion < 10.5 ) newClass = "Opera_7_5"; 


	 var bName = browser.name; 
	 if ( bName == "Opera Mobile" || bName == "Opera Mini" ) newClass = "OperaMobile OperaMini"; 

	 tag.className = class + " " + newClass; 
} 

</script>
 

이 블로그에서 함께 볼만한 글 :

1. userAgent의 값을 알 수 있는 영문사이트 5곳

2. [ 자바스크립트 ] IE 버전 체크용 함수

3. [ 자바스크립트 ] className 사용법

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*