Clase detectar explorador y version.

keldrox · #1 (**permalink**) 25/03/2007, 08:54

He creado esta clase para saber que navegador y que versión se está usando para poder hacer las aplicaciones web lo mas compatible posible.

Archivo class.iDkBrowser.js:

Código:

//////////////////////
// CLASE iDkBrowser //
//////////////////////

function iDkBrowser()
{
	//////////////////////////
	// PROPIEDADES PÚBLICAS //
	//////////////////////////
	
	this.motor_navigator_iDkBrowser    = null;
	this.name_navigator_iDkBrowser     = null;
	this.version_navigator_iDkBrowser  = null;
	this.nameObject_iDkBrowser         = "iDkBrowserObject";


	//////////////////////////
	// PROPIEDADES PRIVADAS //
	//////////////////////////

	this.navigator_motor_iDkBrowser   = navigator.appCodeName;
	this.navigator_name_iDkBrowser    = navigator.appName;
	this.navigator_user_iDkBrowser    = navigator.userAgent;
	
	// Motores Browsers.
	this.motorBrowsers_iDkBrowser     = new Array;
	this.motorBrowsers_iDkBrowser[0]  = "MICROSOFT INTERNET EXPLORER";
	this.motorBrowsers_iDkBrowser[1]  = "NETSCAPE";
	this.motorBrowsers_iDkBrowser[2]  = "OPERA";
	
	// Browsers Internet Explorer.
	this.browsersFamily_iDkBrowser    = new Array;
	this.browsersFamily_iDkBrowser[0] = new Array( "MSIE 6.0",   8 );
	this.browsersFamily_iDkBrowser[1] = new Array( "Opera 7.23", 10 );
	
	// Browsers Netscape.
	this.browsersFamily_iDkBrowser[2] = new Array( "Netscape/8.1.2",  14 );
	this.browsersFamily_iDkBrowser[3] = new Array( "Netscape6/6.01",  14 );
	this.browsersFamily_iDkBrowser[4] = new Array( "Firefox/2.0.0.3", 15 );
	
	// Browsers Opera.
	this.browsersFamily_iDkBrowser[5] = new Array( "Opera/9.10", 10 );
	

	//////////////////////
	// MÉTODOS PÚBLICOS //
	//////////////////////

	this.detect_iDkBrowser = detect_iDkBrowser;
}


//////////////////////////////////////////
// Metodo publico: detect_iDkBrowser(); //
//////////////////////////////////////////

function detect_iDkBrowser()
{	
	///////////////
	// VARIABLES //
	///////////////
	
	var cont  = null;
	var cont2 = null;

	for( cont = 0; cont < this.motorBrowsers_iDkBrowser.length; cont++ )
	{
		if( this.navigator_name_iDkBrowser.toUpperCase() == this.motorBrowsers_iDkBrowser[cont]  )
		{
			for( cont2 = 0; cont2 < this.browsersFamily_iDkBrowser.length; cont2++ )
			{
				if( this.navigator_user_iDkBrowser.indexOf( this.browsersFamily_iDkBrowser[cont2][0] ) >= 0 )
				{
					this.motor_navigator_iDkBrowser   = navigator.appCodeName;
					this.name_navigator_iDkBrowser    = navigator.appName;					
					
					
					this.version_navigator_iDkBrowser = this.navigator_user_iDkBrowser.substring( this.navigator_user_iDkBrowser.indexOf(
																								  this.browsersFamily_iDkBrowser[cont2][0] ),
																								  this.navigator_user_iDkBrowser.indexOf(
																								  this.browsersFamily_iDkBrowser[cont2][0] ) + 
																								  this.browsersFamily_iDkBrowser[cont2][1] );
				}
			}			
		}
	}
}

Archivo index.html:

Código:

<html>

	<head>
		
		<title> Prueba iDkBrowser </title>
		
		<script src="class.iDkBrowser.js" language="javascript"></script>
		
	</head>
	
	<body>
	
		<script language="javascript">
		
			var iDkBrowserObject = new iDkBrowser();
			
				iDkBrowserObject.detect_iDkBrowser();
				
			document.write("<b>Motor del navegador:</b> "+ iDkBrowserObject.name_navigator_iDkBrowser +"<br>");
			document.write("<b>Motor basado en:</b> "+ iDkBrowserObject.motor_navigator_iDkBrowser +"<br>");
			document.write("<b>Version del navegador:</b> "+ iDkBrowserObject.version_navigator_iDkBrowser +"<br>");
			
		</script>
	
	</body>
	
</html>

Mini Tutorial (Hacerlo mas funcional):

Código:

Añadir un nuevo explorador
+------------------------+

this.browsersFamily_iDkBrowser[num] = new Array( "Nombre del explorador", Tamaño de caracteres del nombre del explorador );


Ejemplo:

- Añadir explorador con el nombre explorito5.9:

this.browsersFamily_iDkBrowser[6] = new Array( "explorito5.9", 12 );

// 12 caracteres del nombre: explorito5.9.



Añadir un motor de explorador
+---------------------------+

this.motorBrowsers_iDkBrowser[num]  = "Nombre del motor del explorador";


Ejemplo:

- Añadir motor con el nombre GatoRayosX:

this.motorBrowsers_iDkBrowser[3]  = "GatoRayosX";

No esta del todo perfecta pero me funciona para las aplicaciones que voy desarrollando de momento.

Esta probado en:
- Internet Explorer 6.
- Opera 7.23
- Opera 9.10
- Netscape 6.01
- Netscape 8.1.2
- Mozilla Firefox 2.0.0.3

PD: Si alguien lo prueba con Safari o algun browser más y se anima a añadirlo pues se lo agradecería.

PD1: Podeis ver una "demo" aqui.

Saludos!!