javascript - info - Muestra un mensaje si el navegador no es Internet Explorer 9 o superior.
js detect ie (9)
Me gustaría mostrar a mis usuarios una barra con este aspecto, si:
- El navegador no es IE; o
- El navegador es IE pero es la versión 8 o anterior
(Tenga en cuenta que la captura de pantalla es solo para fines ilustrativos, IE 9 es compatible con mi sitio).
Encontré este agradable complemento de jQuery, pero no quiero usar ventanas emergentes.
El sitio donde implementaré esto es un sitio de Sharepoint 2013, por lo que usaré un componente web de editor de contenido para incluir el contenido HTML que proporcione y la barra debería estar en la parte superior de todo lo demás.
Por favor, incluya CSS si es necesario para que se vea como la captura de pantalla?
HTML
IE 9 y anteriores (hasta, creo, IE 4) se pueden identificar mediante comentarios condicionales en HTML.
Como @Jost señaló , podría usarlos para advertir a los usuarios de IE en IE 8 y versiones anteriores, como esto:
<!--[if lte IE 8]>
BANNER HERE
<![endif]-->
Sin embargo, como IE 10 eliminó el soporte para estos, no puede usarlos para identificar navegadores que no sean de IE.
jQuery
jQuery solía incluir un módulo de detección del navegador ( $.browser ), pero se eliminó en jQuery 1.9 . Si puede usar una versión anterior de jQuery (por ejemplo, 1.8.3 ) o el complemento de jQuery Migrate , entonces puede usar esto para mostrar el banner.
if ( !$.browser.msie || $.browser.version < 9 ) {
// Add banner to the page here.
}
Detección del navegador en general
Tenga en cuenta que la detección del navegador es difícil. Los nuevos navegadores están saliendo todo el tiempo, por lo que cualquier complemento de compatibilidad con el navegador puede quedar obsoleto rápidamente, al igual que la premisa en la que se basan sus mensajes de advertencia. La detección del navegador de jQuery fue la que se mantuvo de manera más consistente, e incluso se rindieron al final.
En estos días, generalmente se espera que los desarrolladores web escriban código que funcione en todos los navegadores y utilicen la detección de características para tratar con los navegadores que no admiten las funciones que desean usar.
Mientras trabaja en un sitio de SharePoint, presumiblemente es para uso interno de la empresa, y la compañía está centrada en Microsoft. Parece que está desarrollando el sitio para trabajar en IE e ignorando otros navegadores durante el desarrollo.
Si puede esperar razonablemente que la mayoría de sus usuarios estén en alguna versión de IE, tal vez la advertencia de comentario condicional sea suficiente.
En realidad, en SharePoint (OP mencionó que) hay una variable incorporada browseris . Está disponible en el alcance de la ventana global. Respondiendo a la pregunta OP:
- El navegador no es IE;
- utilizar browseris.ie
- El navegador es IE pero es la versión 8 o anterior
- utilizar browseris.ie8down
(probado en SP2013 en la premisa)
Me gusta el html condicional simple. (Más simple siempre parece mejor.)
Puede encontrar otra alerta javascript más completa en: http://www.browser-update.org
Me pareció interesante la pregunta. Así que elaboré un guión para mí mismo, pero tal vez alguien más pueda beneficiarse de él. Así que por eso lo publiqué como respuesta. Devuelve un objeto con navegador y la información del sistema operativo.
browser = {};
if (/edge//[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "edge";
browser.majorVersion = parseInt(/edge//([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /edge//([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome//[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "chrome";
browser.majorVersion = parseInt(/chrome//([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /chrome//([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox//[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "firefox";
browser.majorVersion = parseInt(/firefox//([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /firefox//([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie/ [0-9]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = parseInt(/MSIE/ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
browser.version = /MSIE/ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr//[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "opera";
browser.majorVersion = parseInt(/opr//([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /opera//([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident//[7]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = 11;
browser.version = "11";
} else if (/Safari//[0-9.]+/i.test(navigator.userAgent)) {
browser.agent = "safari";
browser.majorVersion = parseInt(/Version//([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /Version//([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
browser.agent = false;
browser.majorVersion = false;
browser.version = false;
}
if (/Windows/ NT/.test(navigator.userAgent)) {
browser.os = "windows";
var winver = parseFloat(/Windows/ NT/ ([0-9]{1,2}/.[0-9]{1})/i.exec(navigator.userAgent)[1]);
switch(winver) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
case 6.3:
browser.osversion = "8.1";
break;
case 10.0:
browser.osversion = "10";
break;
default:
browser.osversion = false;
}
} else if (/OS/ X/ /.test(navigator.userAgent)) {
browser.os = "os x"; //
browser.osversion = /OS/ X/ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "linux";
browser.osversion = false;
}
No le sugiero que utilice el lado del cliente ya que algunos navegadores pueden engañarlo al pasar valores incorrectos para pasar las pruebas del sitio web.
Entonces, supongo que si usas PHP como servidor, puedes detectar el navegador usando la función get_browser() que te da mucha información sobre el navegador aquí es un bonito turtoeial:
Parte 1:
http://thenewboston.org/watch.php?cat=11&number=67
Parte 2:
http://thenewboston.org/watch.php?cat=11&number=68
Si usa otro idioma, todos los del lado del servidor tienen esta función. Simplemente búsquelo en Google o haga referencia a algún tipo de anuncio.
Desde el lado del cliente puede detectar si es compatible así:
function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById(''test'').style.borderRadius;
if(browser !== ''Microsoft Internet Explorer''){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert(''Compatible'');
}else{
alert(''uncompatible'');
}
HTML:
<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->
VIOLÍN:
Pruébalo y funciona:
Podrías usar compilación condicional junto con comentarios condicionales
Aquí un breve resumen de cómo esto podría funcionar.
- Mostrar siempre la barra
- Establecer una bandera en javascript.
IEMinor=false - Establezca el indicador en verdadero si IE <= 9, utilizando una etiqueta de secuencia de comandos y comentarios condicionales
- Utilice la compilación condicional para ocultar la barra si
@_jscript_version > 9(en realidad no es necesario) eIEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
/*@cc_on @*/
/*@if (@_jscript_version > 9)
if (!IEMinor)
document.getElementById("bar").style.display = "none";
/*@end @*/
</script>
Era demasiado perezoso para agregar el tipo de script ...
Aquí hay un ejemplo en JSBin que no muestra la barra en IE 10+ (no probado) . Y lo muestra en otros casos.
Nota: no hice que se viera exactamente como en la captura de pantalla, debes hacer que esa parte funcione
Edición: el uso del modo de navegador de IE para probar contra IE <10 parece funcionar
Edit2: Whoops, pensé en la imagen IE9 tampoco es compatible, para permitir que IE9 cambie el lte IE 9 a lt IE 9 y @_jscript_version > 9 a >= 9
Verificando si el motor del navegador es Trident 6+ (IE 9, 10, 11) debería hacer ( demo ):
(function () {
var trident = {
string: navigator.userAgent.match(/Trident//(/d+)/)
};
trident.version = trident.string ? parseInt(trident.string[1], 10) : null;
if (!trident.string || trident.version < 6) {
document.body.innerHTML = ''<div class="alert">Not supported.</div>'' +
document.body.innerHTML;
}
})();
Sin embargo, el rastreo puede interrumpirse en las versiones finales o futuras de IE 11 si Microsoft decide cambiar la cadena de userAgent .
prueba $.browser.version
consulte aquí $.browser
EDITAR: Esto responde directamente a la OP.
He actualizado la respuesta de Dany con dos actualizaciones probadas en (IE 6,7,8,9,10,11), Chrome y Edge. Principalmente porque las actualizaciones son muy difíciles de leer en los comentarios.
- Javascript puro - no se requiere jQuery
- IE10 informa IE 10 vs IE 1
- Esto ahora informa Edge
- No se requieren elementos HTML específicos para preexistir (aparte de un cuerpo)
- Probado en IE6, IE7, IE8, IE9, IE11, Chrome v62 y Edge
- TODO: funciona correctamente en OSX Sierra y en iPhone
La prueba de borde debe ser la primera, ya que pretende ser todo. : /
Dicho esto, la detección del navegador "es lo que es" y podemos esperar que la necesidad se desaparezca pronto.
browser = {};
if (/(Edge//[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Edge//[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Edge//[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome//[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(chrome//[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(chrome//[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox//[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(firefox//[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(firefox//[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE/ [0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(MSIE/ [0-9]{1})/i)[0].split(" ")[0];
browser.version = parseInt(navigator.userAgent.match(/(MSIE/ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera//[0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Opera//[0-9]{1})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Opera//[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident//[7]{1})/i.test(navigator.userAgent)) {
browser.agent = "MSIE";
browser.version = 11;
} else {
browser.agent = false;
browser.version = false;
}
if (/(Windows/ NT/ [0-9]{1}/.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "Windows";
switch (parseFloat(navigator.userAgent.match(/(Windows/ NT/ [0-9]{1}/.[0-9]{1})/)[0].split(" ")[2])) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
default:
browser.osversion = false;
}
} else if (/(OS/ X/ [0-9]{2}/.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "OS X";
browser.osversion = navigator.userAgent.match(/(OS/ X/ [0-9]{2}/.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "Linux";
browser.osversion = false;
}
if (browser.agent === "MSIE" && browser.version <= 9) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
document.body.insertBefore(newDiv, document.body.firstChild);
}