Como hemos podido ver, hemos incluido una estructura que detecta un navegador Firefox, un Internet Explorer versión 7, Internet Explorer versión inferior a la 7, un Opera (también con distinción de versiones) y por último un caso para todos los demás navegadores.
El código completo de la página será el siguiente:
<html>
<head>
<title>Link con estilos dinámico</title>
<script language="Javascript">
//detección del navegador por http://www.quirksmode.org/js/detect.html
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: "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();
//script para poner estilos distintos para cada navegador
if (BrowserDetect.browser == "Firefox") {
document.write("<LINK REL='stylesheet' HREF='estilo_firefox.css' TYPE='text/css'>");
}
else {
if (BrowserDetect.browser == "Explorer"){
if (BrowserDetect.version>=7){
document.write("<LINK REL='stylesheet' HREF='estilo_ie7.css' TYPE='text/css'>");
}else{
document.write("<LINK REL='stylesheet' HREF='estilo_ie6.css' TYPE='text/css'>");
}
}else{
if (BrowserDetect.browser == "Opera"){
if (BrowserDetect.version<9){
document.write("<LINK REL='stylesheet' HREF='estilo_opera.css' TYPE='text/css'>");
}else{
document.write("<LINK REL='stylesheet' HREF='estilo_opera9.css' TYPE='text/css'>");
}
}else{
document.write("<LINK REL='stylesheet' HREF='estilo_otros.css' TYPE='text/css'>");
}
}
}
</script>
</head>
<body>
<h1>Detección navegador</h1>
<script>
//muestro el navegador
document.write("Tu navegador: ");
document.write(BrowserDetect.browser);
document.write(" / ");
document.write(BrowserDetect.version);
document.write(" / ");
document.write(BrowserDetect.OS);
</script>
</body>
</html>
Usuarios que han visto este tema también han visto...
- Detectar Navegador
- De decimales a Hexadecimales y viceversa en JavaScript
- Scroll de noticias con Javascript
- Capa Deslizante
- Abrir ventana sin bordes
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.