Mostrar Navegador y Sistema Operativo con JavaScript
Algo muy útil y un poco divertido para quien lo ve, es mostrar, a través de texto el navegador y sistema operativo de nuestros visitantes.
Para hacer esto utilizaremos un "pequeño" código JavaScript, que podemos insertar directamente en nuestro archivo dentro de las etiquetas <head></head> o insertar dentro de un archivo .js.
Este es el script:
(Es muy largo, seguir luego del salto)
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
var espacio = document.createTextNode("\u00a0");
Y para mostrarlo usamos lo siguiente:
<script type="text/javascript">
document.write('Estás usando ' + BrowserDetect.browser + '\u00a0' + BrowserDetect.version + ' en ' + BrowserDetect.OS);
</script>
document.write('Estás usando ' + BrowserDetect.browser + '\u00a0' + BrowserDetect.version + ' en ' + BrowserDetect.OS);
</script>
¿Utilidad de esto? no mucha, pero es divertido, como ya dije :B
Post Relacionados
4 Comentarios en “Mostrar Navegador y Sistema Operativo con JavaScript”
Deja un Comentario
Additional comments powered by BackType
09/05/2009



Julio 25th, 2009 a las 8:28 pm
Información Bitacoras.com...
Valora en Bitacoras.com: Algo muy útil y un poco divertido para quien lo ve, es mostrar, a través de texto el navegador y sistema operativo de nuestros visitantes. Para hacer esto utilizaremos un "pequeño" código JavaScript, que podemos insertar ...
Diciembre 29th, 2009 a las 8:00 am
¿¡¿poca utilidad?!?
¡Arriba esa imaginación! ¿por qué no ofrecer ayuda/instrucciones personalizada al usuario en función de su configuración?
¿Por qué mostrarle la descarga de un programa para Linux cuando su sistema es Windows o Linux?
Un saludo y gracias por el aporte
Diciembre 29th, 2009 a las 2:14 pm
@Informático de Guardia: yo pensé que podrÃa tener poca utilidad, pero cada uno se deja llevar por su imaginación para hacer de esto un buen ejemplo :B
Que bueno que te sirva
Abril 14th, 2010 a las 9:48 pm
Muy buen Script