En este artículo, veremos cómo escribir código específico del navegador usando jQuery. Para escribir el código específico del navegador, usaremos la propiedad Navigator userAgent y el método jQuery indexof(). La propiedad Navigator userAgent se usa para obtener el valor del encabezado del agente de usuario enviado al servidor por el navegador. Devuelve una string que representa valores como el nombre, la versión y la plataforma del navegador.
El método index() se utiliza para devolver el índice de los elementos especificados con respecto al selector.
Sintaxis:
navigator.userAgent.indexOf(element)
Enfoque: Primero usaremos el método navigator.userAgent.indexOf() para obtener el índice del navegador. Si el índice devuelto no es -1, imprima el nombre del navegador; de lo contrario, pruebe los siguientes navegadores.
Ejemplo 1: En este ejemplo, usaremos el método navigator.userAgent.indexOf() para imprimir el nombre del navegador en la pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to write a browser-specific code using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to write a browser-specific
code using jQuery?
</h3>
<div class="GFG"></div>
<script>
$(document).ready(function () {
if (navigator.userAgent.indexOf("Chrome") != -1) {
$(".GFG").text('Chrome Browser');
}
else if (navigator.userAgent.indexOf("Firefox") != -1) {
$(".GFG").text("Firefox Browser");
}
else if ((navigator.userAgent.indexOf("MSIE") != -1)
|| (!!document.documentMode == true)) {
alert('Internet Explorer');
}
else {
alert('Unknown Browser');
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el método navigator.userAgent.indexOf() y un botón, cuando se hace clic en el botón, se llama a la función e imprime el nombre del navegador en la pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to write a browser-specific code using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to write a browser-specific
code using jQuery?
</h3>
<input type="button" id="btn" value="Click Here!">
<br><br>
<span class="GFG"></span>
<script>
$(document).ready(function () {
$("#btn").click(function () {
if (navigator.userAgent.indexOf("Chrome") != -1) {
$(".GFG").text('Chrome Browser').css({
"background-color": "green",
"color": "white",
"font-size": "26px",
"font-weight": "bold"
});
}
else if (navigator.userAgent.indexOf("Firefox") != -1) {
$(".GFG").text("Firefox Browser").css({
"background-color": "red",
"color": "white",
"font-size": "26px",
"font-weight": "bold"
});
}
else if ((navigator.userAgent.indexOf("MSIE") != -1)
|| (!!document.documentMode == true)) {
$(".GFG").text('Internet Explorer').css({
"background-color": "blue",
"color": "white",
"font-size": "26px",
"font-weight": "bold"
});
}
else {
$(".GFG").text('Unknown Browser').css({
"background-color": "yellow",
"color": "white",
"font-size": "26px",
"font-weight": "bold"
});
}
});
});
</script>
</body>
</html>
Producción:
